jquery事件在激活函数后停止_Jquery_Function_Button

jquery事件在激活函数后停止

jquery function button

jquery事件在激活函数后停止,jquery,function,button,Jquery,Function,Button,NewbjQuery问题：我有点不明白为什么我的jQuery函数可以工作，但在激活一个通过按钮链接的函数后停止工作。一切按我预期的方式运行：将鼠标悬停在一行上，交换添加/删除CSS，然后单击单元格打印单元格id。但是，当我单击“build table”按钮时，jQuery部分停止工作 <body> <div id="cheese"></div> <p id="printThis"></p> <button id='buildTab

NewbjQuery问题：我有点不明白为什么我的jQuery函数可以工作，但在激活一个通过按钮链接的函数后停止工作。一切按我预期的方式运行：将鼠标悬停在一行上，交换添加/删除CSS，然后单击单元格打印单元格id。但是，当我单击“build table”按钮时，jQuery部分停止工作

<body>
<div id="cheese"></div>
<p id="printThis"></p>
<button id='buildTable'>Build Table</button>
</body>
<script type="text/javascript">
var myTable = "";
var pickRnd = 0;
var clickedValue;
buildTable();
function buildTable() {
    $(document).ready(function() {
        $("td").click(function(event) {
            clickedValue = event.target.id;
            document.getElementById("printThis").innerHTML = "You have selected " + clickedValue;
        });
        $("tr").mouseover(function() {
           $(this).addClass("highlight");
           });  
        $("tr").mouseout(function() {
          $(this).removeClass("highlight");
          });
    $("#buildTable").click(function() {
      buildTable();
    });
    });
    myTable = "<table>";
    for (var i = 0; i < 5; i++) {
        pickRnd = Math.floor(Math.random() * 5);
        myTable += "<tr class='normal" + pickRnd + "' id='monsterTableRow" + i + "'>";
        for (var j = 0; j < 5; j++) {
            myTable += "<td id='td" + j + "-" + i + "'>" + j + "-" + i + "</td>";
        }
        myTable += "</tr>";
    }
    myTable +="</table>";
    document.getElementById("cheese").innerHTML = myTable;
}
</script>



生成表
var myTable=“”；
var-pickRnd=0；
var点击值；
buildTable（）；
函数buildTable（）{
$（文档）.ready（函数（）{
$（“td”）。单击（功能（事件）{
clickedValue=event.target.id；
document.getElementById（“printThis”）.innerHTML=“您已选择”+clickedValue；
});
$（“tr”）.mouseover（函数（）{
$（此）.addClass（“突出显示”）；
});  
$（“tr”）.mouseout（函数（）{
$（此）.removeClass（“突出显示”）；
});
$（“#构建表”）。单击（函数（）{
buildTable（）；
});
});
myTable=“”；
对于（变量i=0；i<5；i++）{
pickRnd=Math.floor（Math.random（）*5）；
myTable+=“”；
对于（var j=0；j<5；j++）{
myTable+=“”+j+“”-“+i+”；
}
myTable+=“”；
}
myTable+=“”；
document.getElementById（“cheese”）.innerHTML=myTable；
}

您有一些错误。。。。我在这里做了一把小提琴

var myTable=”“；
var-pickRnd=0；
var点击值；
$（文档）.ready（函数（）{
函数buildTable（）{
myTable=“”；
对于（变量i=0；i<5；i++）{
控制台日志（“is”+i）；
pickRnd=Math.floor（Math.random（）*5）；
myTable+=“”；
对于（var j=0；j<5；j++）{
myTable+=“”+j+“”-“+i+”；
} 
myTable+=“”；
}
myTable+=“”；
document.getElementById（“cheese”）.innerHTML=myTable；
$（“td”）。单击（功能（事件）{
clickedValue=event.target.id；
document.getElementById（“printThis”）.innerHTML=“您已选择”+clickedValue；
});
$（“tr”）.mouseover（函数（）{
$（此）.addClass（“突出显示”）；
});  
$（“tr”）.mouseout（函数（）{
$（此）.removeClass（“突出显示”）；
});
}
$（#buildTable”）。在（“单击”，buildTable）；
});

与上面相同，但我添加了jquery选择器，如将document.getElementById（'printThis'）替换为$（'printThis'）。请在

var myTable=”“；
var-pickRnd=0；
var点击值；
函数buildTable（）{
$（'#printThis'）.empty（）；
myTable=“”；
对于（变量i=0；i<5；i++）{
pickRnd=Math.floor（Math.random（）*5）；
myTable+=“”；
对于（var j=0；j<5；j++）{
myTable+=“”+j+“”-“+i+”；
}
myTable+=“”；
}
myTable+=“”；
$（“#奶酪”）.html（myTable）；
$（“td”）。单击（功能（事件）{
clickedValue=$（this.attr（'id'）；
$（“#打印此”）.html（“您已选择”+clickedValue）；
});
$（“tr”）.mouseover（函数（）{
$（此）.addClass（“突出显示”）；
});
$（“tr”）.mouseout（函数（）{
$（此）.removeClass（“突出显示”）；
});
}
$（文档）.ready（函数（）{
buildTable（）；
$（“#构建表”）。单击（函数（）{
buildTable（）；
});
});

控制台（F12）中是否有错误？

document.getElementById（“printThis”）.innerHTML=$（“#printThis”）.text（）

我在JavaScript控制台中没有看到任何错误消息。谢谢！成功了！我会投你一票，但我还没有代表积分(

var myTable = "";
var pickRnd = 0;
var clickedValue;
$(document).ready(function(){
function buildTable() {
   myTable = "<table>";
   for (var i = 0; i < 5; i++) {
       console.log(" is is " + i);
       pickRnd = Math.floor(Math.random() * 5);
       myTable += "<tr class='normal" + pickRnd + "' id='monsterTableRow" + i + "'>";
       for (var j = 0; j < 5; j++) {
           myTable += "<td id='td" + j + "-" + i + "'>" + j + "-" + i + "</td>";
      } 
      myTable += "</tr>";
  }
  myTable +="</table>";
  document.getElementById("cheese").innerHTML = myTable; 

  $("td").click(function(event) {
        clickedValue = event.target.id;
        document.getElementById("printThis").innerHTML = "You have selected " + clickedValue;
  });
  $("tr").mouseover(function() {
      $(this).addClass("highlight");
  });  
    $("tr").mouseout(function() {
      $(this).removeClass("highlight");
      });
   }

   $("#buildTable").on("click",buildTable);
});

var myTable = "";
var pickRnd = 0;
var clickedValue;

function buildTable() {

$('#printThis').empty();
    myTable = "<table>";
    for (var i = 0; i < 5; i++) {
        pickRnd = Math.floor(Math.random() * 5);
        myTable += "<tr class='normal" + pickRnd + "' id='monsterTableRow" + i + "'>";
        for (var j = 0; j < 5; j++) {
            myTable += "<td id='td" + j + "-" + i + "'>" + j + "-" + i + "</td>";
        }
        myTable += "</tr>";
    }
    myTable += "</table>";
    $("#cheese").html(myTable);

    $("td").click(function (event) {
        clickedValue = $(this).attr('id');
        $("#printThis").html("You have selected " + clickedValue);
    });
    $("tr").mouseover(function () {
        $(this).addClass("highlight");
    });
    $("tr").mouseout(function () {
        $(this).removeClass("highlight");
    });
}

$(document).ready(function () {

    buildTable();

    $("#buildTable").click(function () {
        buildTable();
    });
});