Menu
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
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>
835
Attaching the event dynamicallyclassName = 'dynamic-link'; // Class name li. innerHTML = dynamicValue; // Text inside $('#links'). appendChild(li); // Append it li. onclick = dynamicEvent; // Attach the event!
public form1() { foreach (Panel pl in Container. Components) { pl. Click += Panel_Click; } } private void Panel_Click(object sender, EventArgs e) { // Process the panel clicks here int index = Panels. FindIndex(a => a == sender); ... }
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/
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
