Question

我有一个按钮，当点击它时，动态构建一个简单的表。在第二个td中，会插入一个按钮以及一些文本。

<input type = "button" id = "search" value = "Search">
<div id = "searcharea"></div>

$('#search').on('click', function() {
    $('#searcharea').html('<table id = "myTable"><tr><td>Some Text</td><td>Blah Blah<br>Blah Blah<br><input type = "button" value = "Get Text"></td></tr></table>');
});

我要做的是在点击“获取文字”按钮时获取上一个td的文字。这是我尝试过的：

$('#myTable').on('click', 'input', function (event) {
    var prevCell = $(this).closest('td').previous('td').text();
    alert(preCell);
 });

我认为答案很简单，但我没有看到。救命。 JSFIDDLE

Answer 1

我相信您打算使用jQuery的prev()方法。

此外，由于您的表是动态生成的，因此在执行JavaScript时它可能不存在于DOM中。您可以delegate your click event将其绑定到不同的（父级和静态）元素而不是动态表。

下面，我将事件绑定到document本身，但如果存在，则可以使用更具体的元素。

$(document).on('click', '#myTable input', function (event) {
    var prevCell = $(this).closest('td').prev('td').text();
    alert(prevCell);
}

以下测试：

$('#search').on('click', function() {
  $('#searcharea').html('<table id = "myTable"><tr><td>Some Text</td><td>Blah Blah<br>Blah Blah<br><input type = "button" value = "Play"></td></tr></table>');
});

$(document).on('click', '#myTable input', function(event) {
  var prevCell = $(this).closest('td').prev('td').text();
  alert(prevCell);
});

#myTable {
  border-collapse: collapse;
  font-size: 0.917em;
  width: 400px;
  min-width: 200px;
  margin-top: 10px;
}
#myTable td {
  border: 1px solid #333;
  padding: 6px;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="search" value="Search">
<div id="searcharea"></div>

Answer 2

这里有两件事情：你绑定（on）你的点击的那一刻，以及你得到文本的方式。因为您在绑定#search上的单击的同时尝试绑定，所以表中不存在任何按钮，因此不会受到约束。未来的按钮必须在创建后绑定，因此您需要在html()插入后执行此操作。

以下作品：

$('#search').on('click', function() {
    $('#searcharea').html('<table id="myTable"><tr><td>Some Text</td><td>Blah Blah<br>Blah Blah<br><input type="button" value="Play"></td></tr></table>');
    // You need to tie your click to the input here, as the input didn't exist before.
    $('#myTable input').on('click', function (event) {
        // You need to look for the parents, then use the prev() function, not previous().
        var prevCell = $(this).parents('td').prev().text();
        alert(prevCell);
    });
});

$('#search').on('click', function() {
    $('#searcharea').html('<table id="myTable"><tr><td>Some Text</td><td>Blah Blah<br>Blah Blah<br><input type="button" value="Play"></td></tr></table>');
    // You need to tie your click to the input here, as the input didn't exist before.
    $('#myTable input').on('click', function (event) {
        // You need to look for the parents, then use the prev() function, not previous.
        var prevCell = $(this).parents('td').prev().text();
        alert(prevCell);
    });
});

#myTable {
    border-collapse:collapse;
    font-size: 0.917em;
    width:400px;
    min-width:200px;
    margin-top:10px;
}
#myTable td {
    border:1px solid #333;
    padding:6px;
    vertical-align:middle;
    
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type = "button" id = "search" value = "Search">
    <div id = "searcharea"></div>

Answer 3

您应该将处理程序委托给 static 元素（一个未生成的元素，与#myTable 不同），以便on()方法与其中的动态生成内容一起使用。另外，使用prev()代替上一个：

$('#searcharea').on('click', ':button', function (event) {
  var prevCell = $(this).closest('td').prev('td').text();
  alert(preCell);
});

Answer 4

在这种情况下，当您尝试将click事件绑定到它时，您的表不存在。所以我们先解决这个问题。然后我们将previous（）改为prev（），我们让它工作了！

$('#search').on('click', function() {
    $('#searcharea').html('<table id = "myTable"><tr><td>Some Text</td><td>Blah Blah<br>Blah Blah<br><input type = "button" value = "Play"></td></tr></table>');
});

$(document).on('click', '#myTable input', function (event) {
    var prevCell = $(this).closest('td').prev('td').text();
    alert(prevCell);
});

从以前的td获取文本

4 个答案: