Enabling live event after it has died_问答_开发者

开发者 https://www.devze.com 2022-12-21 16:48 出处：网络

This is a continuation from the previous stackoverflow jQuery question I asked, but I don\'t think the line that says:

相关专题：jquery

This is a continuation from the previous stackoverflow jQuery question I asked, but I don't think the line that says:

$(".insert").live("click", insertHandler);

is working.

<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function insertHandler(currentRow) {
    var newRow = currentRow.clone(true);
    newRow.children('td:last').empty().append('<input name="myid" />');
    currentRow.after(newRow);
    document.myForm.myid.focus();
}

function OnLoad() {
    $('input[name="myid"]').live('focusout', function() {
        var myValue = $(this).val();
        var currentCell = $(this).parents("td");
        currentCell.empty().append(myValue);
        $(".insert").live("click", insertHandler); // I need help here
    });
    $('.insert').live('click', function() {
        $('.insert').die();
        var currentRow = $(this).parents("tr:first");
        insertHandler(currentRow);
    });
    $('.delete').live('click', function() {
        if (confirm("Are you sure?")) {
            $(this).parents("tr").remove();
        }
    });
}
google.load("jquery", "1");
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body>
<form name="myForm">
<table border="1">
&l开发者_开发问答t;tr>
<td class="insert">Add</td>
<td class="delete">Erase</td>
<td>Sample data goes here</td>
</tr>
</table>
<input name="Other">
</form>
</body>
</html>

I want the user to be able to add a new row, but not click "Add" over and over again continually.

With your help, I've disabled the "Add" event, but now I'm having trouble getting back enabled.

don't die, have some variable to tell if insert is locked;

var insertlocked = false;

$('.insert').live('click', function() {
        if (insertlocked){ return; } //if insert is locked, don't do nothing
        insertlocked = true; //lock insert
        //$('.insert').die(); - don't use this
        var currentRow = $(this).parents("tr:first");
        insertHandler(currentRow);
    });

function insertHandler(...){
  ...
  document.myForm.myid.focus();
  insertlocked = false; //unlock insert again
}

insertHandler expects a table row as a parameter. When you re-attach it that way, it will pass the TD as a parameter.

Also, why do you need live()? There is a bit of performance overhead involved with event delegation. It is not advised unless you need to attach a handler to multiple elements or elements created in future dynamically. So it makes sense for $('input[name="myid"]').live('focusout',... but not for Add, Delete.