Question

我使用PHP非常多，并且总是有点害怕javascript和jquery。但两周前我跳到了jquery，我必须说我真的很喜欢它:-)我做了几个工作脚本，也感谢我在stackoverflow上找到的信息。非常感谢大家： - ）

但是......我在这个问题上花了很多时间似乎无法解决......我会尽力解释。

在index.php文件中，我创建了一个带有php的表（从具有典型SELECT * FROM ...的mysql数据库中提取）。每个单元格都获得一个唯一的ID（例如，Cell_1_1作为第一个，...）。使用Jquery，我有一个脚本可以检测单元格上的单击，获取单元格的id并在其中放置一个带有单元格内容的文本输入字段。然后我检测到一个'onchange'事件（比如回车）来使用ajax调用一个php脚本来改变实际Mysql数据库中这一个单元格的值（使用UPDATE ... WHERE id = cellid语句）。

这一切都很好，我对jquery的力量非常满意： - ）

另一个原因，我想创建原始表不是用PHP而是用jquery。这也很好。如果你比较它输出的html它与php脚本的相同。但由于某种原因，jquery脚本无法检测何时单击（jquery表的）单元格。当我在外部div上绑定检测时，在单元格中放置文本字段没有问题。

因此，jquery'识别'要更改单元格的单元ID。但是不要检测onclick事件。

有没有人知道这是怎么回事？

代码的某些部分需要澄清：

$(document).ready(function () {
  makeclickable();
  // script1: build the table when clicked on a div with the name of the table
  $(".showtable_x").click(function() { 
    var idlastclick = $(this).attr("id"); //take tablename from click
    $.ajax({ //let php return an array with the titles and the content of the table                                   
      url: 'inc/api/api.php',
      data: '&table='+idlastclick,
      dataType: 'json',
      success: function(rows)        
      {
        var table = $('<table></table>');
        var numrow = rows.length; // take number of rows
        var numcol = rows[0].length; // number of cols
        for (i=0; i<numrow; i++){ // for every row
          var row = rows[i]; // take row from array
          var row2 = $('<tr></tr>'); //create html row
          for (j=0; j<numcol; j++){ // for every cell
            var cell = $('<td></td>').html(row[j]);//place content of array in cell
            var cellcounter = "cell_"+i+"_"+j; 
            cell.attr('id', cellcounter); // asign meaningfull id to the cell
            if (i==0) {
              var cell = cell.addClass("bgcolor1");
            } //the titles of the table
            row2.append(cell); // append the cell to the row
          }
          table.append(row2); // append the row to the table
        } // end for i
        $('#firstplaceholder').html(table);
      } // end function
    }); // end ajax;
  }); // end script 1

// script2：确保单元格可单击并写入数据库。（在php创建的表上正常工作）

  function makeclickable() {
    $('td').click( function() { // when click on cell
      if (!$("td.active")[0]){ // only execute when there is no other cell 'active'
        var idlastclick = $(this).attr("id"); // take id of the cell
        var content = $('#'+idlastclick).text(); // take the content of the cell
        $('#'+idlastclick).html("<input type='text' id='textie' value='' />").addClass("active"); 
        $('#textie').attr("value", content).focus();    
        // place a textfield, place the content of the cell, mark the cell as 'active', focus on it
        $('#textie').on("keyup change", function() { // on type, remember the new value
          var value = this.value; 
          $('#textie').on("change", function() { // on enter
            $("td.active").empty().removeClass("active").addClass("exiting"); // clear cell, remove 'active' status, mark it (by class) as the cell to be written in
            $("td.exiting").html(value); // place new value in cell 
            // call php script that writes the new value to the database
            $.ajax({                                      
              url: 'inc/api/api2.php',
              data: '&celid='+idlastclick+'&content='+value,
            }); 
          }); // end 'on enter' detection
        }); // end 'on key-stroke' detection
        $("td.exiting").removeClass("exiting"); // restore original class to cell
      } // end if
    });
  }
});

Answer 1

使用 on() 进行事件委派，例如

使用

$(document).on("keyup change",'#textie', function() {

取代

$('#textie').on("keyup change", function() {

Answer 2

执行$（/ ** /）。click（）;将仅附加到已存在的html元素。对于动态添加的元素，您必须做出选择。

再次手动附加事件（检查您是否未将其双重绑定到现有元素）
使用事件冒泡或委派，并通过.on（）方法捕获父元素上的click事件，作为示例表。这是首选方式。

示例：

$('#myTable').on('click', 'td', function () {/*your code goes here*/});

Answer 3

您必须将click事件委托给makeclickable()函数中的父容器（未动态添加）：

$('table').on('click', 'td', function () {
    ...
}

请参阅JQuery doc：.on()

希望我帮助过你！

Answer 4

在创建任何标记之前，将onclick-handler附加到所有<td>标记。

在之后执行makeclickable() ，您已经创建了表格，它应该有用。

Answer 5

您使用on()实际上就是针对该问题创建了这个问题..对于在运行中创建 “的元素 ..

如何使jquery创建的表中的单元格可单击？

5 个答案: