Как инициировать щелчок по динамически созданному элементу

но как вызвать событие щелчка на динамически созданном элементе, например, я создал новый элемент в dom

Попробуйте определить <div class="one">M</div> без атрибутов <div">M</div>; установка attributes во втором аргументе на jQuery( html, attributes ) с использованием .click()

jQuery( html, attributes )

html

Тип: htmlString Строка, определяющая отдельный отдельный элемент HTML (например, или ).

атрибуты

Тип: PlainObject Объект атрибутов, событий и методов для вызова только что созданного элемента.

Важно. Если передан второй аргумент, строка HTML в первом аргументе должна представлять простой элемент без атрибутов. Как jQuery 1.4, любой тип события может быть передан, и могут быть вызваны следующие методы jQuery: val, css, html, text, data, width , высота или смещение.

// create dynamic element
$( "<div></div>", {
  "class": "one",
  "text": "abc",
  "on": {
    // attach `click` event to dynamically created element
    "click": function( event ) {
      // Do something
      console.log(event.target, this.textContent)
    }
  }
}).appendTo( "body" )
// trigger `click` event on dynamically created element
.click()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

$(document).on('click', '.one', function() {

используйте этот, чтобы щелкнуть по динамически созданному элементу

найдите ДОКУМЕНТАЦИЯ для получения дополнительной информации.

Ага. .trigger() должен выполнять следующие действия:

Фрагмент:

var myDIV = $('<div id="myDIV">&nbsp;</div>');
$(document.body).append(myDIV);
$(document).on('click', '#myDIV', onClick);
function onClick() {
  alert('hello');
}
myDIV.trigger('click');

div {
  background-color: #cc0;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

Но опять же, если это то, что вы хотите сделать, когда document будет готово или когда window загрузится, то вам, вероятно, не нужно .trigger(), вы можете вызвать функцию напрямую.

Сохраните этот элемент в переменной, используйте его для динамического добавления в тело, а затем щелкните по нему:

var div = "<div class='one'>M</div>";
$("body").append($(div));
//Your code//
$(div).trigger("click");

Или, если есть несколько элементов с одним и тем же классом, и это последний элемент, тогда:

$(".one:last").trigger("click");

Поскольку FIDDLE не предоставлен, я принял следующую разметку

<a class="some">Click To Add</a>
<br/>
<div class="container">
</div>

css-класс

.one
{
    background-color: Grey;
}
.some
{
     background-color: Red;
}

Назначение события щелчка после добавления элемента управления в DIV (с классом контейнера)

$(document).ready(function(){
    $('.some').click(function(){
        $('.container').append("<div class='one'>M</div><br/>");
        $('.container div').off('click').on('click',function(){
                alert("Clicked");
        });
    });
});

Попробуйте FIDDLE и поделитесь своими впечатлениями, если таковые имеются.

Надеюсь это поможет ............

Вы когда-нибудь пробовали использовать делегата? если нет, попробуйте сделать это для своего динамически добавляемого контента.

$('body').delegate("div.one", "click", function(e){
   // do you other works here
});

проверьте это здесь

Надеюсь, ваша проблема решена. :)

я публикую этот ответ, как и во всех ответах, я не вижу, куда поместить этот метод триггера.

Если у вас есть какие-либо реализации, такие как .append(), .html() jquery или .innerHTML, .appendChild() простого js, то после его выполнения, или я бы сказал, что всякий раз, когда вы добавляете свой элемент в DOM, сразу после него вы можете использовать любое событие для запуска но какое-то событие должен быть привязан к нему.

Таким образом, элемент должен находиться в DOM, чтобы запускать/инициировать любое событие.

Возьмите этот пример:

var div = $('<div id="aaa">aaa</div>');
$(document.body).append(div).on('click', '#aaa', divClik);

function divClik(e) {
  alert(this.id+' clicked.');
}
div.trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>