0

在单击“删除”按钮后和使用 jQuery 删除行之前，我试图从输入框中获取值。现在我只是想得到第一个盒子，但我的选择尝试没有任何运气。

这是检索具有 .editing 类的输入值的最新尝试。顺便说一句，这还不是全部代码。removeIng 函数正在按预期触发，我只是没有得到我需要的东西。

$('.remove_ing').click(removeIng);

function removeIng(){ //removes the row
    alert($(this).parentsUntil('tr').find('.editing').val());
    $(this).parent().parent().remove();
}

这是HTML，我有几行这样的（动态添加）

<tr>
  <td><input type='text' name='ingredient' value='' class='editing' /></td>
  <td><input type="text" class='editing_amt' name="amount" size="8" value="100"/></td>
  <td><select name='meas' class='editing_meas'></select></td>
  <td><input type="button" name="remove_ing" class="remove_ing" value="Remove"/></td>

</tr>

谢谢您的帮助

4

2 回答 2

2

使用.on()

由于元素是动态添加的，因此您不能将事件直接绑定到它们。因此您必须使用事件委托。

$(document).on('click','.remove_ing',removeIng);

function removeIng(){ //removes the row
    alert($(this).parentsUntil('tr').find('.editing').val());
    $(this).parent().parent().remove();
}

句法

$( elements ).on( events, selector, data, handler );

使用.closest()

反而

$(this).parent().parent().remove();

利用

$(this).closest('tr').remove();
于 2013-10-21T16:26:53.920 回答
0

如果您的 html 是静态的（它不是动态的），您应该给按钮一个 id，最好也给 tr。如果不是这种情况，那么事件委托就是要走的路。@Tushar 向您介绍了事件委托。

无论如何，这里有一个小片段可能会对您有所帮助。

var btn = $(".remove_ing");
btn.click( removeIng );
function removeIng(){
    // get the row
    var tr = $(this).parents("tr").first();
    //get the text boxes
    var txt = tr.find("input[type='text']");
    //loop through the texts
    txt.each(function(){
        alert( $(this).val() );
    });
}

在这两种情况下（动态或静态 html），此函数都将获取您的所有输入文本。希望能帮助到你。

于 2013-10-21T16:34:47.550 回答