javascript - 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 .