Question

我有几个想要编辑的td元素，然后当点击一个按钮时，它们会恢复为静态。问题是让这些元素来回切换。我如何以最简单的方式实现这一目标？

我点击编辑似乎是递归的 - ＆gt;用输入元素替换元素 - ＆gt;给按钮静态函数处理程序 - ＆gt;点击按钮 - ＆gt;用静态内容替换输入 - ＆gt;添加事件处理程序我唯一的问题是将处理程序附加到新创建的元素。

使用Javascript：

// how do I encapsulate this into its own function? Seems recursive.
$('.edit-me').click(function(){
    // remove the other editable fields.

  // For some reason the second toggle errors out. - Why?
  makeEditable(this);
  $(this).toggleClass('edit-me');
  $(this).toggleClass('static-me');
});

    // attach a handler to the newly created elements
    $('.static-me').click(function(){
        // this is not working because newly created items do not have the event associated to them.
        console.log("HERE");
        makeStatic(this);
        $(this).toggleClass('edit-me');
        $(this).toggleClass('static-me');
    });
}
$('.delete-me').click(function(){
    pair_delete(this);
});
function makeEditable(obj){
    // replace the elements with an editable element.
    $(obj).parent().children('td.editable').each(function(index, item){
        $(item).html('<input class="form-control edit-mode editing" data-field="' +  $(this).attr('data-field') + '" value="' + $(this).html() + '" >');
        // toggle for event handling.
        $(item).removeClass('editable');
        $(item).addClass('edit-mode');
    });
    $('.editing').change(function(){
        // create the update
        pair_update(this);
    });
}
function makeStatic(obj){
    // makes the row static.
    $(obj).parent().children('td.edit-mode').each(function(index, item){
        // replace with input field.
        $(item).html('<td class="editable" data-field="'+ $(item).attr('data-field') +'">' + $(item).find('.editing').val() + '</td>');
        $(item).addClass('editable');
        $(item).removeClass('edit-mode');
    });
}

HTML：

<td class="editable" data-field="pair_name"><?=$pair['pair_name']?></td>
    <td class="editable" data-field="email_name"><?=$pair['email_id']?></td>
    <td class="editable" data-field="sent_event_id"><?=$pair['sent_event_id']?></td>
<td class="editable" data-field="minutes"><?=$pair['minutes']?></td>
    <td class="edit-me">
<button type="submit" class="btn btn-primary">
    <i class="glyphicon glyphicon-pencil icon-white"></i>
</button>
</td>

Answer 1

如果你想继续切换，请使用.on('click', '.classname', function() { // do stuff here; });代替.click()（它应该解决对dom上新元素的绑定）

另一种解决方案是在没有切换的情况下尝试一些东西，因为切换变得混乱，切换元素等。像这样更直接的东西可以起作用：http://jsfiddle.net/swm53ran/177/

$(document).ready(function() {
    $('table').on('click', '.edit', function() {
        var name = $(this).closest('tr').find('.name').html();
        var email = $(this).closest('tr').find('.email').html();
        $(this).closest('tr').find('.name').html('<input type="text" value="'+ name +'"/>');
        $(this).closest('tr').find('.email').html('<input type="text" value="'+ email +'"/>');
        $(this).closest('tr').find('.edit').closest('td').html('<a href="#" class="save">Save</a>');
    });

    $('table').on('click', '.save', function() {
        var name = $(this).closest('tr').find('.name').find('input').val();
        var email = $(this).closest('tr').find('.email').find('input').val();
        $(this).closest('tr').find('.name').html(name);
        $(this).closest('tr').find('.email').html(email);
        $(this).closest('tr').find('.save').closest('td').html('<a href="#" class="edit">Edit</a>');
    });

});

<table>
    <tr>
        <td class="name">Name1</td>
        <td class="email">Email1</td>
        <td class="action"><a href="#" class="edit">Edit</a></td>
    </tr>
    <tr>
        <td class="name">Name2</td>
        <td class="email">Email2</td>
        <td class="action"><a href="#" class="edit">Edit</a></td>
    </tr>
    <tr>
        <td class="name">Name3</td>
        <td class="email">Emaiil3</td>
        <td class="action"><a href="#" class="edit">Edit</a></td>
    </tr>
</table>

需要事件处理程序时切换类问题

1 个答案: