训练图项目删除错误

时间：2018-10-14 01:35:24

标签： javascript jquery html button html-table

我正在尝试编写一个简单的程序：从一组火车对象中提取一堆物品，并将它们打印到图表上，其中包含有关火车的信息（名称，目的地等）以及一个按钮从列表中删除火车。这项工作很好而且很花哨，除了当我添加另一列火车并单击“提交”按钮时，删除按钮不再起作用。清除功能甚至不会触发。怎么了？

//PROBLEMS:
//-Nothing can be deleted after submit is clicked

     var Thomas = {
  name: "Thomas",
  dest: "New York",
  first: "05:00",
  freq: 30,
}

 var Duncan = {
  name: "Duncan",
  dest: "Boston",
  first: "06:00",
  freq: 45,
}

var trains = [Thomas, Duncan];

//now make this a function?

function printTrains(){
for (i = 0; i < trains.length; i++)
{


// $("table").append("<tr id ='train" + i + "'></tr>");

$("table").append("<tr id ='train" + i + "'>");



 $("#train" + i).append("<td>" + trains[i].name + "</td>");

$("#train" + i).append("<td>" + trains[i].dest + "</td>");

 var tFrequency = trains[i].freq;
 $("#train" + i).append("<td>" + tFrequency + "mins" + "</td>");



    var firstTime = trains[i].first;



    var firstTimeConverted = moment(firstTime, "hh:mm").subtract(1, "years");


    // Current Time
    var currentTime = moment();



    var diffTime = moment().diff(moment(firstTimeConverted), "minutes");



    var tRemainder = diffTime % tFrequency;



    var tMinutesTillTrain = tFrequency - tRemainder;
    $("#train" + i).append("<td>" + tMinutesTillTrain + "</td>");



    var nextTrain = moment().add(tMinutesTillTrain, "minutes");
    $("#train" + i).append("<td>" + moment(nextTrain).format("hh:mm") + "</td>");

    $("#train" + i).append("<td><button class = 'remove' id = '" + i + "'>x</button></td></tr>")
}
}

printTrains();

$(".remove").click(function(event){

$("#train" + this.id).remove();

//code for removing from array:
trains.splice(this.id, 1);
//ef yeah!  It worked!!

console.log("Removing train");
})


$("#submit").click(function(event){
  event.preventDefault();



  $($("td").parent()).remove();



console.log("you clicked me");


var newName = $("#name").val();
var newDest = $("#dest").val();
var newFirst = $("#firstTT").val();
var newFreq = $("#freq").val();
var newFirstConverted = moment(newFirst, "hh:mm").subtract(1, "years");
var newDiffTime = moment().diff(moment(newFirstConverted), "minutes");
var newRemainder = newDiffTime % newFreq;
var newMinAway = newFreq - newRemainder;
var newNextArr = moment().add(newMinAway, "minutes");


console.log("New first converted:" + newFirstConverted);





if (parseFloat(newFreq) * 0 == 0 && moment(newFirst, 'hh:mm', true).isValid())
{
var newTrain =
{
  name: newName,
  dest: newDest,
  first: newFirst,
  freq: newFreq,
  nextArr: newNextArr,
  minAway: newMinAway
}
trains.push(newTrain);

console.log(trains);

//TRAIN SOUND
 var trainSound = new Audio("train.wav");
  trainSound.volume = 0.2;

   trainSound.play();

  console.log("Playing train");

//*******
}
else if (moment(newFirst, "hh:mm", true).isValid() == false)
{
  alert("Must enter First Train Time in correct format");
}
else
{
  alert("Must enter number for frequency")
}

printTrains();


})

这是我的HTML代码：

   <!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


  <style> 

  #submit {
    margin: 5px;
  }

  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

  body{
  background: url(background.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
  </style>
</head>

<!-- WHY IS MY PAGE LOPSIDED
LOOK UP INSTRUCTIONS FOR DEPLOYMENT -->
<body>

<table>
  <tr>
    <th>Train Name</th>
    <th>Destination</th>
    <th>Frequency</th>
    <th>Minutes Away</th>
    <th>Next Arrival</th>
  </tr>

</table>



<hr>
 <form>
  Train Name: <input type="text" id="name">
  <br>
  <br>
  Destination: <input type = "text" id="dest">
  <br>
  <br>
  First Train Time (HH:mm - military time): <input type="text" id="firstTT">
  <br>
  <br>
  Frequency: Min <input type = "text" id = "freq">
  <br>
  <br>
  <input type="submit" id ="submit">


 </form>

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


  </body>
  </html>

1 个答案:

答案 0 :(得分：0)

首次使用以下命令加载页面时，您可以在元素上设置点击处理程序：

$(".remove").click(function(event){/* etc */}

但是，当您在添加新火车之后重新创建表时，不会添加点击处理程序。这些是新元素，因此您需要这样做。下面，我将代码放在函数addRemove中，然后在printTrains中调用了该函数。

另一方面，您可以考虑将删除行添加到表中，而不是每次都重新构造它。然后，您可以在完成点击处理后将其添加到新行中。

//PROBLEMS:
//-Nothing can be deleted after submit is clicked

var Thomas = {
  name: "Thomas",
  dest: "New York",
  first: "05:00",
  freq: 30,
}

var Duncan = {
  name: "Duncan",
  dest: "Boston",
  first: "06:00",
  freq: 45,
}

var trains = [Thomas, Duncan];

//now make this a function?

function printTrains() {
  for (i = 0; i < trains.length; i++) {

    $("table").append("<tr id ='train" + i + "'>");

    $("#train" + i).append("<td>" + trains[i].name + "</td>");

    $("#train" + i).append("<td>" + trains[i].dest + "</td>");

    var tFrequency = trains[i].freq;
    $("#train" + i).append("<td>" + tFrequency + "mins" + "</td>");

    var firstTime = trains[i].first;
    var firstTimeConverted = moment(firstTime, "hh:mm").subtract(1, "years");
    // Current Time
    var currentTime = moment();
    var diffTime = moment().diff(moment(firstTimeConverted), "minutes");
    var tRemainder = diffTime % tFrequency;
    var tMinutesTillTrain = tFrequency - tRemainder;
    $("#train" + i).append("<td>" + tMinutesTillTrain + "</td>");
    var nextTrain = moment().add(tMinutesTillTrain, "minutes");
    $("#train" + i).append("<td>" + moment(nextTrain).format("hh:mm") + "</td>");
    $("#train" + i).append("<td><button class = 'remove' id = '" + i + "'>x</button></td></tr>")
    addRemove()
  }
}

printTrains();
addRemove();

function addRemove() {
  $(".remove").click(function(event) {
    $("#train" + this.id).remove();
    //code for removing from array:
    trains.splice(this.id, 1);
    //ef yeah!  It worked!!  
    console.log("Removing train");
  })
}


$("#submit").click(function(event) {
  event.preventDefault();
  $($("td").parent()).remove();
  console.log("you clicked me");

  var newName = $("#name").val();
  var newDest = $("#dest").val();
  var newFirst = $("#firstTT").val();
  var newFreq = $("#freq").val();
  var newFirstConverted = moment(newFirst, "hh:mm").subtract(1, "years");
  var newDiffTime = moment().diff(moment(newFirstConverted), "minutes");
  var newRemainder = newDiffTime % newFreq;
  var newMinAway = newFreq - newRemainder;
  var newNextArr = moment().add(newMinAway, "minutes");

  console.log("New first converted:" + newFirstConverted);

  if (parseFloat(newFreq) * 0 == 0 && moment(newFirst, 'hh:mm', true).isValid()) {
    var newTrain = {
      name: newName,
      dest: newDest,
      first: newFirst,
      freq: newFreq,
      nextArr: newNextArr,
      minAway: newMinAway
    }
    trains.push(newTrain);

    console.log(trains);

    //TRAIN SOUND
    var trainSound = new Audio("train.wav");
    trainSound.volume = 0.2;
    trainSound.play();
    console.log("Playing train");
    //*******
  } else if (moment(newFirst, "hh:mm", true).isValid() == false) {
    alert("Must enter First Train Time in correct format");
  } else {
    alert("Must enter number for frequency")
  }

  printTrains();

})
#submit {
  margin: 5px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

body {
  background: url(background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table>
  <tr>
    <th>Train Name</th>
    <th>Destination</th>
    <th>Frequency</th>
    <th>Minutes Away</th>
    <th>Next Arrival</th>
  </tr>
</table>
<hr>
<form>
  Train Name: <input type="text" id="name">
  <br>
  <br> Destination: <input type="text" id="dest">
  <br>
  <br> First Train Time (HH:mm - military time): <input type="text" id="firstTT">
  <br>
  <br> Frequency: Min <input type="text" id="freq">
  <br>
  <br>
  <input type="submit" id="submit">
</form>

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

相关问题
最新问题