jquery не распознает идентификатор элемента HTML

Question

jquery не распознает идентификатор элемента HTML

0

Я не знаю, почему событие jQuery click на #btn не работает.

'//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>

qannouf oualid 12 май 2014, в 14:21

Источник

3

Это должен быть $(document).ready(...
Sani Singh Huttunen 12 май 2014, в 11:30

Теги:

javascript

jquery

2 ответа

Ещё вопросы

Sani Singh Huttunen · Answer 1 · 2014-05-12T09-42-00.000Z

Здесь есть пара проблем:

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

должно быть:

$(document).ready(...

Затем вы динамически вставляете кнопку btn. Поскольку он недоступен в document.ready это событие не привязано к нему вообще. Вам нужно будет повторно appendToPopUp событие внутри 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.

Или вы могли бы делегировать событие тоже
почему вы не предложили делегирование событий на этом этапе ../
спасибо, Сани, теперь это работает, важно теперь я понимаю, почему, два дня страданий спасибо

Vijaya Kumar Thangavel · Answer 2 · 2014-05-12T10-30-00.000Z

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>