jquery不识别html元素的id

Question

我不知道为什么#btn上的jQuery点击事件无效。

`//this is the script` 
$('document').ready(function(){
  $('#btn').click(function(){
    alert('2');
  });
});

function appendToPopUp(){
  document.getElementById('popUp').innerHTML='<BUTTON id="btn" onClick="alert(1)">clickerIci</BUTTON>';
}

<!--this is the body-->
<DIV id='popUp'></DIV>
<BUTTON onClick='appendToPopUp()'>display</BUTTON>

Answer 1

这里有几个问题：

$('document').ready(...

应该是：

$(document).ready(...

然后您动态插入btn按钮。由于document.ready无效，因此该活动根本不附加。您必须在appendToPopUp内重新附加活动。

function appendToPopUp()
{
  document.getElementById('popUp').innerHTML='<BUTTON id="btn" onClick="alert(1)">clickerIci</BUTTON>';

  $('#btn').click(function(){
    alert('2');
  });
}

因此，在这种情况下，您实际上并不需要$(document).ready()。

修改

我实际做的事情是这样的：

<DIV id='popUp'></DIV>
<BUTTON id="display">display</BUTTON>

$(document).ready(function() {
  $('#display').on('click', function() {
    $('#popUp').html('<BUTTON id="btn">clickerIci</BUTTON>');

    $('#btn').on('click', function() {
      alert('2');
    });
  });
});

请参阅JSFiddle。

Answer 2

Try with the below HTML...
On page load Jquery doesn't know about #btn so it will not bind the events so we explitcly calling the bindevents function after it is loaded to DOM.

<script>
function bindevents(){
    $('#btn').on("click",function(){
          alert('2');
    });
}
function appendToPopUp()
{
  document.getElementById('popUp').innerHTML='<BUTTON id="btn"   onClick="alert(1)">clickerIci</BUTTON>';
   bindevents();
}
</script>
<DIV id='popUp'></DIV>
<BUTTON onClick='appendToPopUp()'>display</BUTTON>