Question

我遇到了这个问题，我有两个兄弟，一个输入和一个调用函数来检索输入中的值的按钮，但它一直告诉我Value是未定义的......

这是＆＃34;表格＆＃34;：

＆＃13;

<li>
<input id="mem3" value="TestU4" disabled="">
<button id="del3" class="delmem" onclick="deleteBandMember();">remove</button>
</li>

＆＃13;

这里的jQuery代码：

＆＃13;

function deleteBandMember() {
  var mmbr = $(this).prev("input").val();  //<-RETURNS UNDEFINED
}

＆＃13;

我需要使用此选择器，因为有太多动态创建的输入... 谢谢！

Answer 1

将this作为deleteBandMember函数中的参数传递，如下所示： -

HTML： -

<li>
<input id="mem3" value="TestU4" disabled="">
<button id="del3" class="delmem" onclick="deleteBandMember(this);">remove</button>
</li>

jQuery： -

function deleteBandMember(elem){
   var mmbr = $(elem).prev("input").val();
}

Demo

Answer 2

直接使用jQuery，您可以附加一个点击处理程序：

HTML：

<li>
<input id="mem3" value="TestU4" disabled="">
<button id="del3" class="delmem">remove</button>
</li>

JS：

$('#del3').click(function(){
  var mmbr = $(this).prev("input").val();
})

Answer 3

虽然Kartikeya是正确的。我建议不要使用＆＃34; onClick＆＃34;属性，它不再是一个好习惯。另外，您正在使用jQuery，因此您可以利用它。所以你的代码看起来像是：


$('#del3').click( function() {
  var mmbr =  $(elem).prev("input").val();
  // do more stuff. 
})

Answer 4

除了问题有一个很好的答案之外，如果您的表单中有大量输入和按钮，您可能需要考虑event delegation。 jQuery让这很容易。不是将事件附加到每个按钮，而是将一个事件附加到包含这些元素的元素（如<form>）：

HTML

<form id="form">
...
  <li>
    <input id="mem3" value="TestU4" disabled=""></input>
    <button id="del3" class="delmem">remove</button>
  </li>
  <li>
    <input id="mem34" value="TestU44" disabled=""></input>
    <button id="del34" class="delmem">remove</button>
  </li>
...
</form>

JQUERY

$('#form').on('click', '.delmem', function() { deleteBandMember(this); });

DEMO

使用THIS选择器从按钮旁边的输入中检索值

4 个答案: