Jquery Right Selector to use with element/button Loaded Dynamically using .html()?

Question

What is the right 'selector' to use to make 'My Button' work? I've searched this site, none seems to work for me?

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, all" />
<title>Example</title>
</head>

<body>
    <div id="result"><!--results-->
    </div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        //generate table
        htmlx='<table class="table table-condensed">';
        htmlx+='<tr><td align="center"><button type="button" id="bt_kgt2" name="bt_kgt" class="btn btn-info">My Button</button></td></tr>';
        htmlx+='</table>';
        $('#result').html(htmlx);               
    });

    $("#bt_kgt2").on( "click", function() {
        alert ("button clicked!");
    });
</script>
</body> 
</html>

Pranav C Balan · Accepted Answer · 2016-06-16T04:23:34.360

You are trying to bind the click event handler before the element is adding. You have two option to bind click event handler either bind after adding element to dom.

$(document).ready(function() {
  //generate table
  htmlx = '<table class="table table-condensed">';
  htmlx += '<tr><td align="center"><button type="button" id="bt_kgt2" name="bt_kgt" class="btn btn-info">My Button</button></td></tr>';
  htmlx += '</table>';
  $('#result').html(htmlx);
  $("#bt_kgt2").on("click", function() {
    alert("button clicked!");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
  <!--results-->
</div>

Or use event delegation to listen dynamically added element

$(document).ready(function() {
  //generate table
  htmlx = '<table class="table table-condensed">';
  htmlx += '<tr><td align="center"><button type="button" id="bt_kgt2" name="bt_kgt" class="btn btn-info">My Button</button></td></tr>';
  htmlx += '</table>';
  $('#result').html(htmlx);

});

$('#result').on("click", "#bt_kgt2", function() {
  alert("button clicked!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
  <!--results-->
</div>

both work for me ..thanks for the help – Lanz Man Jun 16 '16 at 06:51 — Lanz Man, Jun 16 '16 at 06:51
@LanzMan : glad to help :) – Pranav C Balan Jun 16 '16 at 06:53 — Pranav C Balan, Jun 16 '16 at 06:53

Jquery Right Selector to use with element/button Loaded Dynamically using .html()?

1 Answers1