Событие щелчка не работает с дочерними элементами динамически создаваемого элемента

Question

Я работаю с bootstrap-colorpicker, чтобы заполнить вводимое значение цвета простым графическим содержимым.Для того, чтобы придать некоторые «цвета для подсказок», я попытался добавить загрузчик по умолчанию для цветовой палитры с другими цветами.Выглядит это так:

Чтобы добиться этого, я добавил следующеекод до конца страницы.По сути, он сам загружает палитру цветов, а затем добавляет нужный элемент div с элементами.

$(document).ready(function() {
  setTimeout(function() {
    $(".colorpicker-color").remove();
    $('<div style="display: block;width:130px;height:100px;/* float: right; */position: absolute;top: 104px;/* overflow-y: scroll; */"><div><small class="text-muted">Sugestões:</small><div style="display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;"><i class="fas fa-circle" style="top: 0px;margin:5px;color:#aaa;cursor:pointer" id="color_0" onclick=" alert('im working');"></i></div></div> </div>').insertAfter(".colorpicker-hue");
    $(".colorpicker").css("height","185px");
  }, 500);
});

Проблема в том, что событие click для fa-круга fas не работает.Я размещаю оповещение («я работаю»);только для тестирования предлагает.Я не буду отображаться при нажатии.

Полученный код после jquery добавляет следующие элементы:

[![resulting code][3]][3]

Answer 1

Все ответы имеют отличный совет для вас, но они, возможно, пропустили проблему.Фактически, Людовико дал вам ответ, но он был тихо включен в его другую очень полезную информацию, так что, возможно, вы пропустили его.

Вы столкнулись с чем-то, что называется делегирование события ,Это означает, что элементы, недавно добавленные в DOM, не имеют связанных с ними привязок кликов (даже если вы определили их в коде) , потому что их не было в DOM, когда события кликов были связаны с соответствующими элементами.

(Обратите внимание, что «DOM» - это, по сути, живая веб-страница, как она отображается на вашем экране, со всеми реальнымивременные моды из javascript и т. д. Так что это больше, чем просто HTML-код.)

Очень просто решить эту проблему, используя jQuery.

Вместо:

$('#myID').click(function(){
    //your code here
});

сделать это вместо этого:

$(document).on('click', '#myID', function(){
    //your code here
});

Для этого нужно связать событие click с чем-то, что существует во время рендеринга DOM (т. Е. Объект document)) - и метод jQuery .on() теперь отслеживает DOM на предмет вставки чего-либо еще.Если какой-либо новый элемент соответствует указанному элементу, событие щелчка привязывается к этому элементу всякий раз, когда оно появляется в DOM .

Ссылки:

https://learn.jquery.com/events/event-delegation/

https://api.jquery.com/on/

http://jqfundamentals.com/chapter/events

Answer 2

Код, используемый для создания и вставки элементов DOM, не отформатирован должным образом. Внутри других кавычек есть неиспользованные кавычки:

Чтобы решить эту проблему, вы можете обрезать внутренние кавычки этой длинной строки (см. здесь для более подробной информации), но я бы рекомендовал вам объявить ваш обработчик событий в отдельном выражении (это сделает ваш код легче читать и поддерживать):

$('body').on("click", ".fa-circle", function() {
    alert("click!");
});

---

Кроме того, я настоятельно рекомендую вам извлечь все встроенные CSS. Это сделает вашу жизнь намного проще. Примерно так:

<script>
$(document).ready(function() {
  setTimeout(function() {
    $(".colorpicker-color").remove();
    $('<div id="container"><div><small class="text-muted">Sugestões:</small><div id="inner"><i class="fas fa-circle" id="color_0"></i></div></div> </div>').insertAfter(".colorpicker-hue");
    $(".colorpicker").css("height","185px");
  }, 500);

  $('body').on("click", ".fa-circle", function() {
    alert("I'm working!");
  });

});
</script>

<style>
#container{
  display: block;width:130px;height:100px;/* float: right; */position: absolute;top: 104px;/* overflow-y: scroll; */
}
#inner {
  display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;
}
#color_0{
  top: 0px;margin:5px;color:#aaa;cursor:pointer
}
</style>

Answer 3

В общем, вам следует избегать встроенных обработчиков событий, таких как onclick, особенно при работе с jQuery, который сам по себе обеспечивает довольно гибкий интерфейс для привязки событий.

Вы можете использовать этот подход вместо:

$(document).ready(function() {
  setTimeout(function() {
    $(".colorpicker-color").remove();

    $(".colorpicker").css("height","185px");


    /* Compose suggestions into a local variable */
    var suggestions = $('<div style="display:block; width:130px; height:100px; position:absolute; top:104px;"><div><small class="text-muted">Sugestões:</small><div style="display: flex;flex-wrap: wrap;padding:5px;height: 60px;overflow-y: scroll;"><i class="fas fa-circle" style="top: 0px;margin:5px;color:#aaa;cursor:pointer" id="color_0"></i></div></div> </div>')

    /* select .fas elements from suggestions and assign click handler that way */
    $('.fa-circle', suggestions).click(function() {

        alert("I'm working");
        return false;
    })

    /* Insert suggestions */
    suggestions.insertAfter(".colorpicker-hue");
  }, 500);
})