使用jQuery确定表行用户点击 - 当表通过javaScript动态加载时 - ？

Goal has been to report on the row number of an html table, that a user clicks on within that table - question is which tr element did the user click on?

目标是报告用户在该表中点击的html表的行号 - 问题是用户点击了哪个tr元素？

I was able to do this when the information was hardcoded in the table by the html, using a previous posting How to tell which row number is clicked in a table?

当信息在表格中由html硬编码时，我能够做到这一点，使用之前的帖子如何判断在表格中点击了哪个行号？

My challenge was that because the table was loaded dynamically via javascript, that I wasn't able to link things up properly between the html, the javascript and jQuery. When I clicked on a row in the dynamically generated table, I was not able to communicate I was doing that.

我的挑战是因为表是通过javascript动态加载的，我无法在html，javascript和jQuery之间正确链接。当我点击动态生成的表中的一行时，我无法通信我正在这样做。

I'm working on a jQuery class and looking forward to understanding better how to think problems like this through. But it sure is nice to get help with things so that I have some good examples to work with during my learning.

我正在研究一个jQuery类，期待更好地理解如何通过这样思考这样的问题。但确实很乐意获得帮助，以便在学习过程中有一些很好的例子。

Below is the code, now working, using the code that Ozan suggested.

下面是代码，现在正在使用Ozan建议的代码。

<!DOCTYPE HTML>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Make Table</button>
<div id="container"></div>


<title>Board A</title>


 <script type="text/javascript" charset="utf-8"></script>

 <script src="mainTest.js"></script>


  </head>
   <center>
   <img src="MarmotNapping.jpg" alt="Marmot"

 height="150" width="400"
 >


  </center>



<body>

<p> Click in this line </p>



<script>
/*
// First * question I used
How to tell which row number is clicked in a table?
https://*.com/questions/4524661/how-to-tell-which-row-number-is-clicked-in-a-table
You can achieve this with delegated event handling.

Use jQuery's .on(eventName, selector, handler) method to attach the handler to an element you know will always be present, e.g. document.
*/

//https://*.com/questions/38820078/using-jquery-to-determine-table-row-user-clicking-on-when-table-loaded-dynamic

// begin new
$(document).on("click", "tr", function(e) {
  var index = $(this).index(); //this is event.target, which is the clicked tr element in this case
  console.log(index);
   alert('0.You clicked row '+ ($(this).index()+1) );
});

$("button").on("click", function() {
  $("table").remove();
  var table = $("<table>").appendTo("#container");
  for (i = 0; i < 10; i++) {
    $("<tr>").append($("<td>").text("This is " + i + ". row.")).appendTo(table);

  }
});

// end new
$(document).ready(function(){
    $("p").click(function(){
        alert("The paragraph was clicked.");
    });


});

 $('#QuestionsAnswersTable').find('tr').click( function(){
  alert('1.You clicked row '+ ($(this).index()+1) );
});

$('#QuestionsAnswersTable').find('tr').click( function(){
  var row = $(this).find('td:first').text();
  alert('2.You clicked ' + row);
});



</script>



</body>

</html>

1 个解决方案

#1

The question is not really clear. From what I understand you want to know which tr element was clicked and your table is loaded dynamically. Correct me in the comments if this was not what you mean.

问题不是很清楚。根据我的理解，你想知道哪个tr元素被点击，你的表被动态加载。如果这不是你的意思，请在评论中纠正我。

You can achieve this with delegated event handling.

您可以通过委派事件处理来实现此目的。

Use jQuery's .on(eventName, selector, handler) method to attach the handler to an element you know will always be present, e.g. document.

使用jQuery的.on（eventName，selector，handler）方法将处理程序附加到您知道将始终存在的元素，例如文件。

jQuery Delegated Events

jQuery委托事件

$(document).on("click", "tr", function(e) {
  var index = $(this).index(); //this is event.target, which is the clicked tr element in this case
  console.log(index);
});

$("button").on("click", function() {
  $("table").remove();
  var table = $("<table>").appendTo("#container");
  for (i = 0; i < 10; i++) {
    $("<tr>").append($("<td>").text("This is " + i + ". row.")).appendTo(table);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Make Table</button>
<div id="container"></div>

#1