jQuery - 绑定到特定的Ajax内容元素

Question

我将此form加载到容器中使用jQuery $.ajax另一个form。

清单：

容器中已加载的内容名为form_load_dropdown_content：

在左侧，我有两个小图标可供编辑和添加。我想使用另一个ajax调用来运行特定的PHP脚本来执行所需的操作。

我有以下问题：

• 当我点击每个图标submit并分别显示reset按钮
时
• 当我点击reset时，submit和reset都设置为display: none
• 当我再次点击任何图标时，click仍然会bind显示之前点击的上一个图标。

这就是我在做的事情：

form_load_dropdown_content.on("click", ".icon", function() {
// reusable selectors
var icon_box = $(".box_edit_icons");
var button_box = $(".box_buttons");
var submit_btn  = $(".box_buttons input[type='submit']");
var reset_btn   = $(".box_buttons input[type='reset']");
var option_value_input = $("input.option_value");
var option_order_input = $("input.option_order");

// common functions
button_box.show();
icon_box.hide();

if($(this).hasClass("ico_edit_small"))
{
    // editing
    form_load_dropdown_content.on("click", "input[type='reset']", function(event){
        alert("reset from edit");
        button_box.hide();
        icon_box.show();
    });
}
else if($(this).hasClass("ico_add_small"))
{
    // adding
    form_load_dropdown_content.on("click", "input[type='reset']", function(event){
        alert("reset from add");
        button_box.hide();
        icon_box.show();
    });
}

如何区分两次点击，以便在我显示特定图标类型的submit和reset时运行差异化操作？

更清楚：

• 当我点击icon_add_small然后点击reset =＆gt;输出：＆＃39;从添加＆＃39;
重置
• 然后点击icon_edit_small然后点击reset =＆gt;输出：＆＃39;从编辑＆＃39; ...等重置，而不会混合点击。

我非常感谢任何帮助。我尝试了一些关于阻止点击传播的事情......但没有任何效果。

-------------------------------------------- ---------------

编辑：

我将if部分更改为以下代码，它可以正常工作。我是否应该预期解除点击的任何问题？

if($(this).hasClass("ico_edit_small"))
{
    // editing
    reset_btn.off("click");
    reset_btn.click(function(event){
        alert("reset from edit");
        button_box.hide();
        icon_box.show();
    });
}
else if($(this).hasClass("ico_add_small"))
{
    // adding
    reset_btn.off("click");
    reset_btn.click(function(event){
        alert("reset from add");
        button_box.hide();
        icon_box.show();
    });
}