0

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

问题是，当我更改表单的类以使其删除而不是添加时，什么也没有发生。

我已经解决了这个问题。您应该能够来回切换您希望的次数，而不仅仅是一次。

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

请参阅下面的 jsfiddle 示例：

http://jsfiddle.net/crW9m/7/

这是我的 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();
    });     


  });
​
4

2 回答 2

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){ /*...*/ });
于 2012-10-22T11:14:03.213 回答
-1

The problem is that binding to click events is made at document load, and just changing element class won't affect this bindings. Use jQuery live() method, instead of bindings.

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

instead of 

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

Here is the jsfiddle: http://jsfiddle.net/crW9m/8/

于 2012-10-22T11:18:56.663 回答