不能多次执行jQuery函数

时间:2014-07-04 20:59:17

标签: javascript jquery

我有以下功能:

$('#edit').on("click", function () {
    $('#edit').text('click1');
    $('table a').click(function (e) {
        e.preventDefault();
    });
    $('table a').css("cursor", "default");

        }
    });
    $('#edit').click(function () {
        $('#edit').unbind();
        $('#edit-message-placeholder').empty();
        $('#edit').text('click2');
        $("table tbody").sortable("disable");
        $('table a').unbind()
        $('table a').css("cursor", "auto");

    });
});

首次点击,我希望它更改div#edit的文字。在第二次单击时,它会将文本更改为其他内容。在第三次单击时,该函数的行为就像第一次单击它一样。

我试图在网上找到解决方案,但没有发现任何有用的东西。

2 个答案:

答案 0 :(得分:2)

问题在于您未能正确接近此问题。您不需要绑定/取消绑定事件处理程序。您只需要一个在功能上交替的事件处理程序:

<强>的JavaScript

var isOkay = true;
$("p").click(function () {
    if (isOkay) {
        $(this).text("1st click");
    } else {
        $(this).text("2nd click");
    }
    isOkay = !isOkay;
})

<强> HTML

<p>Click me!</p>

每次单击<p>时,它都会执行操作,然后切换布尔变量isOkay的值。这意味着它将在ifelse块之间切换。请注意,isOkay变量不在$("p").click(...)事件处理程序的范围内。

fiddle

答案 1 :(得分:2)

试试这个 -

使用data属性暂时保存计数器数据

<button id="edit" data-count="1">1</button>


function doWork(val){
    alert(val);
};
$('#edit').on("click", function () {

    if($(this).data('count') == ""){
        $(this).data('count') = 1;
    }
    var count = parseInt($(this).data('count'));
    if (count == 1){
        doWork(count);
    }else if (count == 2){
        doWork(count);
    }else if (count == 3){
        doWork(count);
    }
    count += 1
    count = count >= 4 ? 1: count;
    $(this).data('count', count);
    $(this).html($(this).data('count'));
});

这是jsfiddle - http://jsfiddle.net/pt3zE/1/