CODEWITHSUNDEEP
javascriptjquery
LCJ
LCJ

Reputation: 22652

Click event is not working for dynamically added button

I reffered Creating a div element in jQuery and creatd a div element using javascript. However when I added a button element dynamically, click is not working. What change do we need to do to make the button click working?

Note: We cannot move the function outside of document.ready due to kendo control requirements mentioned in Binding to multiple view models nested in the Dom

Updated References

  1. Wiring up click event using jQuery on() doesn't fire on injected HTML via Ajax call
  2. how to attach jquery event handlers for newly injected html?
  3. After injecting html by jquery, the event handlers doesn't work with/without delegate

CODE

<head>

    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>



<script type="text/javascript">

    //lijo
    $(document).ready(function () 
    {

    $(".statiscDIV").append('<div>FIRST</div>');
      $(".statiscDIV").append('<div>hello <button class="MakeHoldDetailLinkButton" onclick = "showMakeAndHold();">View</button>  </div>');


    //lijo
    function showMakeAndHold() 
    {

        alert("HIIIIIII");

    }


    });

 </script>

</head>

<body>

 <div class="statiscDIV">

A

 </div>

</body>

Upvotes: 6

Views: 8903

Answers (4)

artenson.art98
artenson.art98

Reputation: 1605

Though its late, it may help someone in future.

When an element/ class/ Id is dynamically added, you need to add the event listeners too. Similarly if it is removed, then the event listeners attached to it are also removed.

So either add event listeners also when adding a new element (which will not be a good approach), or use jQuery's on method like so:

$(document).on('click','class or id', function);

Upvotes: 0

cssyphus
cssyphus

Reputation: 40038

When you inject code into the DOM, the jQuery event handlers are not attached/bound to the new elements. (jQuery already did the bindings to DOM elements before the new code was injected). Therefore, when you click a button, no jQuery click event is trapped.

To attach event handlers (and thereby grab events from) injected elements, you must use jQuery .on(), as follows:

jsFiddle Demo

$(".statiscDIV").append('<div>FIRST</div>');
$(".statiscDIV").append('<div>hello <button class="MakeHoldDetailLinkButton">View</button>  </div>');

$(document).on('click','.MakeHoldDetailLinkButton',function(){
    showMakeAndHold();    
});

function showMakeAndHold() {

    alert("HIIIIIII");

}

The .on() method was added in jQuery 1.7 to replace bind(), .delegate(), and .live() -- it does the same thing as all of these. (To unbind event handlers from ANY DOM elements, use .off())

Source: http://api.jquery.com/on/

Upvotes: 16

colinyyj
colinyyj

Reputation: 11

 $(document).ready(function (){
    $(".statiscDIV").append('<div>FIRST</div>');
      $(".statiscDIV").append('<div>hello <button class="MakeHoldDetailLinkButton" onclick = "showMakeAndHold();">View</button>  </div>');

});
//lijo
function showMakeAndHold(){
    alert("HIIIIIII");

}

Upvotes: 0

Oriol
Oriol

Reputation: 288000

You must escape your quotes with \, or mix single and double quotes:

"<div>hello <button class=\"MakeHoldDetailLinkButton\" onclick=\"showMakeAndHold();\">View</button>  </div>"
'<div>hello <button class=\'MakeHoldDetailLinkButton\' onclick=\'showMakeAndHold();\'>View</button>  </div>'
'<div>hello <button class="MakeHoldDetailLinkButton" onclick="showMakeAndHold();">View</button>  </div>'
"<div>hello <button class='MakeHoldDetailLinkButton' onclick='showMakeAndHold();'>View</button>  </div>"

The other problem is that you use inline event listeners. Those run in global context, so can't run functions declared inside a closure.

Either make showMakeAndHold a global function, or better add the event listeners in a better way:

$(".statiscDIV")
    .append('<div>FIRST</div>')
    .append('<div>hello <button class="MakeHoldDetailLinkButton">View</button></div>')
    .find('button').on('click', showMakeAndHold);

Demo

Upvotes: 3

Related Questions