Question

我有两个区域，一个区域用于启用的项目，另一个区域用于禁用的项目。用户可以单击“添加”将内容发送到启用区域。

问题是，当我更改表单的类以使其删除而不是添加时，没有任何反应。

我已经解决了这个问题。你假设能够来回切换你想要的次数，而不仅仅是一次。

您可以在源代码中看到类名实际上正在发生变化，但似乎我的jQuery函数无法识别更改。

请参阅下面的jsfiddle示例：

这是我的HTML标记：

<div class="added">
<form class="add">
<h3>One item </h3>
 <input type="submit" value="Add" />
</form>
    </div>


 <div class="deleted">
    <form class="delete">
        <h3>Second item </h3>    
         <input type="submit" value="Delete" />
    </form>
    </div>

    <div id="destination">
        <p>Destination for added items</p>
    </div>
    <div id="destination2">
        <p>Destination for deleted items</p>
    </div>

这里是jQuery代码：

    $(document).ready(function() {
    $(".add").click(function(event){

    var $form = $(this),           
        $inputs = $form.find("input, select, button, textarea"),            
        serializedData = $form.serialize();


            $form.removeClass("add").addClass("delete");
        $inputs.val('Delete');
            $form.appendTo("#destination");


    // prevent default posting of form
    event.preventDefault();
    });

       $(".delete").click(function(event){        
        var $form = $(this),        
        $inputs = $form.find("input, select, button, textarea"),

        serializedData = $form.serialize();


            //var submit = $form.find(":submit").hide();
            $form.removeClass("delete").addClass("add");
            $inputs.val('Add');
            $form.appendTo("#destination2");


    // prevent default posting of form
    event.preventDefault();
    });     


  });

Answer 1

我已经创建了您脚本的更新版本。

http://jsfiddle.net/crW9m/9/

我唯一的改变是使用委托（jQuery函数on）而不是你的点击事件。当脚本运行时（通常在页面加载时），click事件将添加到与选择器匹配的实际元素中。如果稍后添加其他元素，则它们不会受事件影响，因为事件已添加到特定元素而不是常规选择器。委托通过检查实际事件的匹配元素来解决这个问题。

// $(".delete").click(function(event){ /*...*/ }); // Replace this with:
$(document).on('click', '.delete', function(event){ /*...*/ });

// $(".add").click(function(event){ /*...*/ }); // And replace this with:
$(document).on('click', '.add', function(event){ /*...*/ });

Answer 2

问题是在文档加载时绑定到单击事件，只是更改元素类不会影响此绑定。使用jQuery live()方法，而不是绑定。

$(".add").live("click", function(event){

而不是

$(".add").click(function(event){

这是jsfiddle：http://jsfiddle.net/crW9m/8/

使用jQuery在表单上添加和删除类

2 个答案: