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=".9.1.min.js"></script>
<script src=".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>
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>
4 Answers
Reset to default 16When 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");
}
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);