Я хочу привязать событие onclick к элементу, я динамически вставить с помощью jQuery
Но он никогда не работает привязанными функции. Я'd быть счастлив, если вы можете указать на то, почему этот пример не работает и как я могу заставить ее работать должным образом:
в
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>test of click binding</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
jQuery(function(){
close_link = $('<a class="" href="#">Click here to see an alert</a>');
close_link.bind("click", function(){
alert('hello from binded function call');
//do stuff here...
});
$('.add_to_this').append(close_link);
});
</script>
</head>
<body>
<h1 >Test of click binding</h1>
<p>problem: to bind a click event to an element I append via JQuery.</p>
<div class="add_to_this">
<p>The link is created, then added here below:</p>
</div>
<div class="add_to_this">
<p>Another is added here below:</p>
</div>
</body>
</html>
в
Редактировать: я редактировал пример, чтобы содержать двух элементов метода вставляется. В этом случае, настороже()` вызов не выполняется. (спасибо @Дафф, что указали в комментарии)
Все эти методы являются устаревшими. Вы должны использовать на
способ, чтобы решить вашу проблему.
Если вы хотите динамически добавленный элемент вы'll должны использовать
$(document).on('click', selector-to-your-element , function() {
//code here ....
});
это замена устаревшим .метод прямых ()
.
Первая проблема заключается в том, что когда вы называете добавление на jQuery и установить более чем один элемент, клон элемент для присоединения создается для каждого и, следовательно, добавленные наблюдателя событие теряется.
Альтернативный способ сделать это, чтобы создать ссылку для каждого элемента:
function handler() { alert('hello'); }
$('.add_to_this').append(function() {
return $('<a>Click here</a>').click(handler);
})
Другая потенциальная проблема может быть в том, что наблюдатель событий прилагается, прежде чем элемент был добавлен в DOM. Я'м не уверен, если это имеет что-то сказать, но я думаю, что поведение может считаться неопределенным. Более основательный подход, вероятно, будет:
function handler() { alert('hello'); }
$('.add_to_this').each(function() {
var link = $('<a>Click here</a>');
$(this).append(link);
link.click(handler);
});
Как насчет жить способ?
$('.add_to_this a').live('click', function() {
alert('hello from binded function call');
});
Все, что вы сделали о, похоже, она должна работать. Там'ы другой пост, что выглядит довольно похожие.
Немного опоздала на вечеринку, но я думал, что я попытаюсь прояснить некоторые распространенные заблуждения в обработчики событий jQuery. Как в jQuery 1.7, .На () следует использовать вместо устаревшей
.жить()`, чтобы делегировать обработчики событий для элементов, которые создаются динамически в любой момент после того, как обработчик событий.
Что сказал, это не простое переключение живые
на О
, потому что синтаксис немного отличается:
Новый способ (Пример 1):
$(document).on('click', '#someting', function(){
});
Устаревший способ (Пример 2):
$('#something').live(function(){
});
Как показано выше, есть разница. Закрутка .На () На самом деле можно назвать похожие на
.жить()`, при прохождении селектора к самой функции jQuery:
Пример 3:
$('#something').on('click', function(){
});
Однако, без использования $(документ)
, как в Примере 1, Пример 3 не работает для динамически созданных элементов. Пример 3-это абсолютно нормально, если вы не'т нужна динамическая делегации.
необходимо $(документ).на() на все?
Это будет работать, но если вы Don'т необходимость динамического делегации, было бы более целесообразно использовать пример 3, потому что в Примере 1, требует немного больше работы из браузера. Там выиграл'т быть какого-либо реального влияния на производительность, но есть смысл использовать наиболее подходящий метод для вашего использования.
должна .на() Вместо .нажмите кнопку (), если нет динамических делегация нужен?
Не обязательно. Следующее-Это просто ярлык для примера 3:
$('#something').click(function(){
});
Выше совершенно достоверные, и поэтому он's действительно вопрос личных предпочтений, какой метод используется, когда нет динамических делегация требуется.
Ссылки:
Рассматривайте это:
jQuery(function(){
var close_link = $('<a class="" href="#">Click here to see an alert</a>');
$('.add_to_this').append(close_link);
$('.add_to_this').children().each(function()
{
$(this).click(function() {
alert('hello from binded function call');
//do stuff here...
});
});
});
Это будет работать, потому что вы приложите его к каждому конкретному элементу. Вот почему вы должны - после добавления ваша ссылка на дом - чтобы найти способ, чтобы явно указать свой дополнительный элемент, как элемент jQuery в дом и привязать событие click к нему.
Лучшим способом будет, наверное, - как полагают - чтобы привязать его к определенному классу с помощью прямых методов.
Можно и иногда нужно, чтобы создать событие click вместе с элементом. Это например, когда на основе селектора привязки-это не вариант. Ключевая часть для того чтобы избежать проблем, которые Товита говорил с помощью.replaceWith () на один элемент. Обратите внимание, что это только доказательство концепции.
<script>
// This simulates the object to handle
var staticObj = [
{ ID: '1', Name: 'Foo' },
{ ID: '2', Name: 'Foo' },
{ ID: '3', Name: 'Foo' }
];
staticObj[1].children = [
{ ID: 'a', Name: 'Bar' },
{ ID: 'b', Name: 'Bar' },
{ ID: 'c', Name: 'Bar' }
];
staticObj[1].children[1].children = [
{ ID: 'x', Name: 'Baz' },
{ ID: 'y', Name: 'Baz' }
];
// This is the object-to-html-element function handler with recursion
var handleItem = function( item ) {
var ul, li = $("<li>" + item.ID + " " + item.Name + "</li>");
if(typeof item.children !== 'undefined') {
ul = $("<ul />");
for (var i = 0; i < item.children.length; i++) {
ul.append(handleItem(item.children[i]));
}
li.append(ul);
}
// This click handler actually does work
li.click(function(e) {
alert(item.Name);
e.stopPropagation();
});
return li;
};
// Wait for the dom instead of an ajax call or whatever
$(function() {
var ul = $("<ul />");
for (var i = 0; i < staticObj.length; i++) {
ul.append(handleItem(staticObj[i]));
}
// Here; this works.
$('#something').replaceWith(ul);
});
</script>
<div id="something">Magical ponies ♥</div>
function load_tpl(selected=""){
$("#load_tpl").empty();
for(x in ds_tpl){
$("#load_tpl").append('<li><a id="'+ds_tpl[x]+'" href="#" >'+ds_tpl[x]+'</a></li>');
}
$.each($("#load_tpl a"),function(){
$(this).on("click",function(e){
alert(e.target.id);
});
});
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('click', '.close', function(){
var rowid='row'+this.id;
var sl = '#tblData tr[id='+rowid+']';
console.log(sl);
$(sl).remove();
});
$("#addrow").click(function(){
var row='';
for(var i=0;i<10;i++){
row=i;
row='<tr id=row'+i+'>'
+ '<td>'+i+'</td>'
+ '<td>ID'+i+'</td>'
+ '<td>NAME'+i+'</td>'
+ '<td><input class=close type=button id='+i+' value=X></td>'
+'</tr>';
console.log(row);
$('#tblData tr:last').after(row);
}
});
});
</script>
</head>
<body>
<br/><input type="button" id="addrow" value="Create Table"/>
<table id="tblData" border="1" width="40%">
<thead>
<tr>
<th>Sr</th>
<th>ID</th>
<th>Name</th>
<th>Delete</th>
</tr>
</thead>
</table>
</body>
</html>