First of all just want to mention that I have been through almost every similar Q&A, and non of solutions and suggestions helped me in my case.
首先,我只想提一下,我几乎已经完成了所有类似的问答,而且我的案例中没有解决方案和建议。
I have this construction DEMO and bellow the code that adds a new element to the table. I like the new element, which is a tr and td, have the same functionality as those already existing. I tried live() and delegate(), nothing works. All the suggestions and tutorials pointing towards on() function which I am already using, but still does not work. What am I doing wrong? Please, any suggestions would be highly appreciated. Code below adds new element:
我有这个构造DEMO和下面的代码,向表中添加一个新元素。我喜欢新元素,它是tr和td,具有与现有元素相同的功能。我试过live()和delegate(),没什么用。所有建议和教程指向我已经使用的on()函数,但仍然无法正常工作。我究竟做错了什么?请高度赞赏任何建议。下面的代码添加了新元素:
$(function(){
$('#add').on('click',function() {
$('#edit-tb tr:last').after('<tr><td><button class="up">Up</button></td><td><span class="times" data-myval="1"></span>Goe</td><td><button class="down">Down</button></td></tr>');
});
});
2 个解决方案
#1
2
Event delegation captures the event on a container, but only invokes the callback if the target element or one of his parents has a certain selector. To delegate an event, you attach the event to the parent using .on()
, but add a 2nd parameter, which states the target. For example:
事件委托在容器上捕获事件,但仅在目标元素或其父节点之一具有某个选择器时才调用回调。要委派事件,请使用.on()将事件附加到父事件,但添加第2个参数,该参数表示目标。例如:
$('.table') // container
/* event , target, handler */
.on('click', '.up' , function() {});
You should attach the event handler to a close container, the .table
or event .table > tbody
if you want the binding to ignore the header.
如果希望绑定忽略标头,则应将事件处理程序附加到关闭容器,.table或事件.table> tbody。
Demo (fiddle):
$(function() {
$('.table')
.on('click', '.up', function() {
var element = $(this);
var count = element.closest('tr').find('.times').attr('data-myval');
count++;
if (count > 4) {
count--;
$('#max').modal('show');
element.closest('tr').find('.times').text(4 + ' x ');
}
element.closest('tr').find('.times').attr('data-myval', count);
element.closest('tr').find('.times').text(count + ' x ');
})
.on('click', '.down', function() {
var element = $(this);
var count = element.closest('tr').find('.times').attr('data-myval');
count--;
parseInt(element.closest('tr').find('.times').attr('data-myval', count))
element.closest('tr').find('.times').text(count + ' x ');
if (count < 2) {
element.closest('tr').find('.times').text('');
}
if (count < 1) {
element.parents('tr').remove();
}
});
});
#2
4
Your event delegation is not correct. Try like following.
您的活动授权不正确。尝试以下。
$(document).on('click', '.up', function () {
var count = $(this).closest('tr').find('.times').attr('data-myval');
count++;
if (count > 4) {
count--;
$('#max').modal('show');
$(this).closest('tr').find('.times').text(4 + ' x ');
}
$(this).closest('tr').find('.times').attr('data-myval', count);
$(this).closest('tr').find('.times').text(count + ' x ');
});
$(document).on('click', '.down', function () {
var count = $(this).closest('tr').find('.times').attr('data-myval');
count--;
parseInt($(this).closest('tr').find('.times').attr('data-myval', count))
$(this).closest('tr').find('.times').text(count + ' x ');
if (count < 2) {
$(this).closest('tr').find('.times').text('');
}
if (count < 1) {
$(this).parents('tr').remove();
}
});
#1
2
Event delegation captures the event on a container, but only invokes the callback if the target element or one of his parents has a certain selector. To delegate an event, you attach the event to the parent using .on()
, but add a 2nd parameter, which states the target. For example:
事件委托在容器上捕获事件,但仅在目标元素或其父节点之一具有某个选择器时才调用回调。要委派事件,请使用.on()将事件附加到父事件,但添加第2个参数,该参数表示目标。例如:
$('.table') // container
/* event , target, handler */
.on('click', '.up' , function() {});
You should attach the event handler to a close container, the .table
or event .table > tbody
if you want the binding to ignore the header.
如果希望绑定忽略标头,则应将事件处理程序附加到关闭容器,.table或事件.table> tbody。
Demo (fiddle):
$(function() {
$('.table')
.on('click', '.up', function() {
var element = $(this);
var count = element.closest('tr').find('.times').attr('data-myval');
count++;
if (count > 4) {
count--;
$('#max').modal('show');
element.closest('tr').find('.times').text(4 + ' x ');
}
element.closest('tr').find('.times').attr('data-myval', count);
element.closest('tr').find('.times').text(count + ' x ');
})
.on('click', '.down', function() {
var element = $(this);
var count = element.closest('tr').find('.times').attr('data-myval');
count--;
parseInt(element.closest('tr').find('.times').attr('data-myval', count))
element.closest('tr').find('.times').text(count + ' x ');
if (count < 2) {
element.closest('tr').find('.times').text('');
}
if (count < 1) {
element.parents('tr').remove();
}
});
});
#2
4
Your event delegation is not correct. Try like following.
您的活动授权不正确。尝试以下。
$(document).on('click', '.up', function () {
var count = $(this).closest('tr').find('.times').attr('data-myval');
count++;
if (count > 4) {
count--;
$('#max').modal('show');
$(this).closest('tr').find('.times').text(4 + ' x ');
}
$(this).closest('tr').find('.times').attr('data-myval', count);
$(this).closest('tr').find('.times').text(count + ' x ');
});
$(document).on('click', '.down', function () {
var count = $(this).closest('tr').find('.times').attr('data-myval');
count--;
parseInt($(this).closest('tr').find('.times').attr('data-myval', count))
$(this).closest('tr').find('.times').text(count + ' x ');
if (count < 2) {
$(this).closest('tr').find('.times').text('');
}
if (count < 1) {
$(this).parents('tr').remove();
}
});