CODEWITHSUNDEEP
javascriptjquery
shuan
shuan

Reputation: 136

jQuery live bind without event

jQuery.fn.extend({
  testfunc: function() {
    $(this).click(function() {
      alert("testfunc!");
    });
  }
});
$("#container").on('click', "button", function() {
  $(this).testfunc();
});

$("#container").append('<button class="dynamic-buttons"  type="button" >button2</button>');
$("#container").append('<button class="dynamic-buttons"  type="button" >button3</button>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <button class="dynamic-buttons" type="button">button</button>
</div>

I have a jQuery function, which is not allowed to change. I need to use the function for dynamic created html objects. the on() function need to bind a event, but my function already have the click event, here is the problem!

Upvotes: 1

Views: 616

Answers (1)

Kiran Shinde
Kiran Shinde

Reputation: 5992

https://jsfiddle.net/aqLstehj/3/

Check this out

You need to bind event of 'DOMNodeInserted'

$(document).on("DOMNodeInserted", "#container button", function() {
    $(this).testfunc();
})

Upvotes: 1

Related Questions