Question

当我通过jQuery设置事件处理程序时，根据数据属性选择DOM元素（$("input[data-action='enable']")）

下面的代码重复了我正在做的事情。单击该按钮时，将调用相应的callback函数，并更新按钮的data-action和value元素。我期待看到这一点，因为数据操作值已经改变，点击处理程序将切换。有没有办法设置它以便确实发生这种情况，或者我是否需要在点击事件后手动设置处理程序？

<input type="button" id="btn1" data-action="enable" value="enable" />
<input type="button" id="btn2" data-action="disable" value="disable" />

$("input[data-action='enable']").on("click", function() {
    var callback = function(context){
        context.val("disable");
        context.data("action", "disable");
    };
    ajaxCall(true, callback, $(this));
});

$("input[data-action='disable']").on("click", function() {
    var callback = function(context){
        context.val("enable");
        context.data("action", "enable");
    };
    ajaxCall(false, callback, $(this));
}); 

var ajaxCall = function(state, callback, context) {
    //would do an ajax call, and on success
    console.log(context.data("action"));
    callback(context);
};

Answer 1

问题是您附加处理程序的jQuery对象不是“实时”集合，也不反映对DOM的更改。您需要使用委托事件来处理这种情况，因为这将处理已更新的DOM元素上的事件。

此外，jQuery data()方法不会更新基础HTML，因此您需要将选择器更改为将更新的属性，例如value属性：

<强> Working Demo

$(document).on("click", "input[value='enable']", function() {
    var callback = function(context){
        context.val("disable");
        context.data("action", "disable");
    };
    ajaxCall(true, callback, $(this));
});

$(document).on("click", "input[value='disable']", function() {
    var callback = function(context){
        context.val("enable");
        context.data("action", "enable");
    };
    ajaxCall(false, callback, $(this));
});

编辑：您还可以通过制作一个稍微更智能的事件处理程序来简化此操作：

<强> Working Demo

$("input").on("click", function() {
    var that = $(this),
        action = that.val() === 'enable' ? 'disable' : 'enable'
    ;

    ajaxCall(false, function(){
        that.val(action);
        that.data("action", action);
        console.log(action);
    });
});

var ajaxCall = function(state, callback) {
    //would do an ajax call, and on success
    callback();
};

当选择器更改时，如何连接jQuery

1 个答案: