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

  • Wiring up click event using jQuery on() doesn't fire on injected HTML via Ajax call
  • how to attach jquery event handlers for newly injected html?
  • 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>

    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/

    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 

     $(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");

}
    链接地址: http://www.djcxy.com/p/83362.html

    上一篇: 使用JQuery从JSON数据构建动态子菜单？

    下一篇: Click事件不适用于动态添加的按钮