Trigger clipboard.js parent

Question

I am using the Clipboard.js plugin a website, and stuck with the issue selecting only parent class of the .copy button on-click.

The problem is that I want the code inside pre tag to be copied with rich text formatting and the method I am using does it well (return document.querySelector("myClass")), however when I am changing the preceding code with the one I found in a similar question (return $(trigger).closest(".fw-code-copy").next("code").text();) I can copy each block's code but loosing formatting, I mean the code is being copied as plain text.

Could you please review the code I have and advise how to find the class of button's parent?

HTML

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some other code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

CSS

.code-snippet{
    position: relative;
    width: 100%;
    bordeR: 1px solid red;
    margin-bottom: 20px;
}
.copy{
    position: absolute;
    right: 20px;
    bottom: 20px;
}

JS

$(document).ready(function(){
    var clipboard = new Clipboard('.copy', {
        target: function() {
            return document.querySelector('.code');
        }
    });
});

score 3 · Accepted Answer · answered Jan 30 '16 at 13:48

You could use jQuery .closest() to get first element from ancestors by selector:

JSFiddle

$(document).ready(function(){
    var clipboard = new Clipboard('.copy', {
        target: function(trigger) {
            return $(trigger).closest('.code-snippet').find('.code').get(0);
        }
    });
});

.code-snippet {
    position: relative;
    width: 100%;
    border: 1px solid red;
    margin-bottom: 20px;
}

.copy {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.5/clipboard.min.js"></script>

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

<div class="code-snippet">
    <pre class="code">
     &lt;div&gt;
        some other code
     &lt;/div&gt;
    </pre>
    <input class="copy" type="button" value="copy">
</div>

Готово! Спасибо еще раз, возился пол дня ничего не придумал :) — egurb, Jan 30 '16 at 13:56
@EmilGurbanov I'm glad to help. It's better to not write in Russian here, it's international site, other people don't speak Russian and can't understand. There is http://ru.stackoverflow.com =). — sergdenisov, Jan 30 '16 at 14:00
The comment has no meaning for others I guess, but anyway you are right:) Have a nice day! — egurb, Jan 30 '16 at 14:05

score 2 · Answer 2 · answered Jan 30 '16 at 13:50

I think this should work. You don't even need jQuery in the target function:

$(document).ready(function(){
    var clipboard = new Clipboard('.copy', {
        target: function(trigger) {
            return trigger.previousElementSibling;
        }
    });
});

Snippet:

$(document).ready(function() {
  var clipboard = new Clipboard('.copy', {
    target: function(trigger) {
      return trigger.previousElementSibling;
    }
  });
});

.code-snippet {
  position: relative;
  width: 100%;
  bordeR: 1px solid red;
  margin-bottom: 20px;
}
.copy {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.code {
  color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="code-snippet">
  <pre class="code">
     &lt;div&gt;
        some code
     &lt;/div&gt;
    </pre>
  <input class="copy" type="button" value="copy">
</div>

<div class="code-snippet">
  <pre class="code">
     &lt;div&gt;
        some other code
     &lt;/div&gt;
    </pre>
  <input class="copy" type="button" value="copy">
</div>

Trigger clipboard.js parent

2 Answers2