jQuery trigger click after insertBefore

Question

I'm trying to figure out how to trigger click event right after insertBefore

$this = $(this);
var changeImageHTML = '<div class="sample1 sample2">&nbsp;</div>';

//attempt 1
$(changeImageHTML).insertBefore($this).trigger('click');

//attempt 2
$(changeImageHTML).insertBefore($this).find('.sample2').trigger('click');

//attempt 3
$(changeImageHTML).insertBefore($this).find('.sample1.sample2').trigger('click');

//attempt 4
$(changeImageHTML).insertBefore($this).bind('click').trigger('click');

.sample2 --> a class of a particular plugin I'm trying to trigger.

Version: jQuery 2.1

Thanks for your help. :)

What? do you know what does `insertBefore()` method do? What exactly is the case to do so? — Jai, Jun 21 '16 at 06:49
yep it's supposed to insert the element before the clicked element which is $(this). I have no problem with insertBefore, the element is rendering... the problem is I can't make it trigger click event after it's been rendered. — Woppi, Jun 21 '16 at 06:55
Where is click handler defined for `.sample1`, `.sample2` elements? — guest271314, Jun 21 '16 at 06:55
The line `$(changeImageHTML).insertBefore($this).trigger('click');` should trigger the event for the append `div` element, if you don't have any click listener for the element then nothing will happen! Instead of shooting in the dark, read the documentations! — Ram, Jun 21 '16 at 06:56
It has an event listener... a plugin listening to the .sample2 clicked event. I have no problem if it's already attached to the DOM with same class .sample2. The event is being triggered. But when I'm re-rendering it and triggering click, nothing is happening. — Woppi, Jun 21 '16 at 06:58
If the plugin doesn't use event delegation then the element has no click handler bound to it. You should call the plugin method on the generated element. — Ram, Jun 21 '16 at 07:00
Would be better if a downvoter would explained why it was downvoted to help people who ask questions improved their post instead of just anonymously downvoting. — Woppi, Jun 21 '16 at 07:16
@Vohuman, thanks for your answer, would have voted you as the best answer. Problem solved, need to add event delegation to the plugin itself. http://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working — Woppi, Jun 21 '16 at 08:18

score 1 · Answer 1 · answered Jun 21 '16 at 06:56

give a try , you need to give a click handler to target element, in your case click event is called but handler is missing so event is lost.

$(document).ready(function(){
$this = $("div.container");
  var changeImageHTML = "<div class='sample1 sample2' onclick='test()'>test</div>";
  $(changeImageHTML).insertBefore($this).click()
})
function test(){
  alert("ok")
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">Container</div>

score 1 · Answer 2 · answered Jun 21 '16 at 07:00

Use event delegation

$(document).on("click", ".sample1.sample2", function() {
  alert("clicked")
})

var changeImageHTML = '<div class="sample1 sample2">&nbsp;sample</div>';
var $this = $("div");

$(changeImageHTML).insertBefore($this).trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>div</div>

jQuery trigger click after insertBefore

2 Answers2