Question

我有一个带有div ID =“colorRecord”的网页，里面有一个按钮。单击此按钮时，使用jQuery ajax在colorRecord div中添加新div。这可以做很多次。

<form class="admin">
  <fieldset>
    <legend>Colours</legend>
            <div id="colorRecord"><div class="color-row"><label>Color:</label><input value="" name="color" class="std-text" type="text"><input name="recordColor" value="Save" onclick="recordNewColor();return false;" type="submit"></div></div>
    <input onclick="createNewColorRow(3);return false;" value="New Color" type="button">
  </fieldset>

</form>

每个新div都有一个输入和一个输入按钮。单击输入按钮时，将调用一个函数来获取按钮左侧的输入字段的值。我想：

$（this）.prev（）。val（）会实现我的结果，但我只是未定义：

function recordNewColor() {
  console.log('Record Color');
  var thiscolor =  $(this).prev().val();
  console.log(thiscolor)
}

任何帮助将不胜感激：

Answer 1

当你this致电recordNewColor时传递<input name="recordColor" value="Save" onclick="recordNewColor(this);" type="submit">：

recordNewColor

然后在你的function recordNewColor(el) { console.log('Record Color'); var thiscolor = $(el).prev().val(); console.log(thiscolor); return false; }函数中将元素作为参数：

{{1}}

Answer 2

您不应该使用HTML中的onclick属性进行绑定。请改用jQuery，使用delegate()将允许您自动绑定到新元素。

$(document).ready(function () {
  $('#colorRecord').delegate('input[name=recordColor]', 'click', function () {
    console.log('Record Color');
    var thiscolor =  $(this).prev().val();
    console.log(thiscolor)
  });
});

Answer 3

您没有在内联JavaScript中提供上下文。不管怎样，最好不要内联。这是一种更清洁的方法。

$('input[name="recordColor"]').click(function(){
   console.log('Record Color');
   var thiscolor =  $(this).prev().val();
   console.log(thiscolor)
});

Answer 4

您需要通过jQuery附加click事件，而不是直接放在DOM对象上。

<form class="admin">
   <fieldset>
    <legend>Colours</legend>
        <div id="colorRecord"><div class="color-row"><label>Color:</label><input value="" name="color" class="std-text" type="text"><input name="recordColor" value="Save" class="recordNewColorBtn" type="submit"></div></div>
    <input value="New Color" type="button" class="recordNewColorBtn">
   </fieldset>

</form>

所以在上面的代码中，我删除了onclick属性并为你的按钮指定了一个id。在下面的代码中，您使用该id来查找按钮对象并附加click事件。

$(document).ready(function()
{
    $('.recordNewColorBtn', $('#colorRecord')).live('click', function() {
      console.log('Record Color');
      var thiscolor =  $(this).prev().val();
      console.log(thiscolor)
    });
});

.live将允许click事件绑定到任何具有类.recordNewColorBtn的元素，无论它何时被创建。

遍历.prev（）和.val（）

4 个答案: