Question

我有一个列表，我有链接，点击这些链接我正在做的事情。这些链接可以动态添加。例如，我在页面上有一个输入表单，当用户填写该表单时，我通过在列表中附加一个新元素来更新列表。

以下是我的列表代码

<section id="mealPerDay">
@foreach (MealPerDay mpd in Model.GetMealPerDay())
{
    <div class="panel radius @String.Concat("panel_", mpd.Id)">
        <span>@mpd.Name</span>
        <a class="right edit-margin-left edit showHideEditDailyMeal" data-id="@mpd.Id" data-container="mealPerDay" data-cancel=" ">edit</a>
    </div>

}
</section>

当页面加载用户看到此列表并单击函数时会像这样调用

  $('.showHideEditDailyMeal').click(function (event) {
    event.preventDefault();
    var container = $(this).data('container');
    var id = $(this).data('id');
    var cancel = $(this).data('cancel');
    if (cancel == ' ') {
        $('#' + container + ' div.panel.panel_' + id + ' a.cancel-edit').show();
        $('#' + container + ' div.panel.panel_' + id + ' a.edit').hide();
        $('#' + container + ' .edit-form.edit_form_' + id).show();
    } else {
        $('#' + container + ' div.panel.panel_' + id + ' a.cancel-edit').hide();
        $('#' + container + ' div.panel.panel_' + id + ' a.edit').show();
        $('#' + container + ' .edit-form.edit_form_' + id).hide();
    }
});

这很好用，现在如果我添加一些内容，我会将它附加到列表中，就像这样

function newGenerateHtml(result, container, classNameForDelete, classNameForEdit, classNameForShowHideEdit) {
var html = '<div class="panel radius panel_' + result.id + '">';
html += '<span>';
html += result.name;
html += '</span>'
html += '<a class="right edit-margin-left edit ' + classNameForShowHideEdit + '" data-id=' + result.id + ' data-container=' + container + ' data-cancel=" ">edit</a>';
html += '</div>';

return html;
}

我得到的标记类似于页面加载时加载的数据。但是动态添加数据的click事件不起作用。

Answer 1

因为您要动态生成HTML，请尝试使用event delegation.

而不是

$('.showHideEditDailyMeal').click(function (event) {

尝试

$(document.body).on('click','.showHideEditDailyMeal',function(event){

Answer 2

使用.on()

$('body').on('click', '.showHideEditDailyMeal', function (event) {
event.preventDefault();
var container = $(this).data('container');
var id = $(this).data('id');
var cancel = $(this).data('cancel');
if (cancel == ' ') {
    $('#' + container + ' div.panel.panel_' + id + ' a.cancel-edit').show();
    $('#' + container + ' div.panel.panel_' + id + ' a.edit').hide();
    $('#' + container + ' .edit-form.edit_form_' + id).show();
} else {
    $('#' + container + ' div.panel.panel_' + id + ' a.cancel-edit').hide();
    $('#' + container + ' div.panel.panel_' + id + ' a.edit').show();
    $('#' + container + ' .edit-form.edit_form_' + id).hide();
}
});

Answer 3

使用或生活而不是

$('.showHideEditDailyMeal').click(function (event) {
Try

$(document.body).on('click','.showHideEditDailyMeal',function(event){

或

$(document.body).live('click','.showHideEditDailyMeal',function(event){

在动态添加html时没有调用click函数

3 个答案: