Question

我在那里使用了一个脚本我在点击一个类时添加了一行。我在添加的行中添加了一个近距离。但是当我尝试为close类创建一个onlick事件来关闭添加的行时，它不起作用。这是添加行和添加到其中的close类的脚本：

<script>
$(function() {
    $('table.listtable td input.selectseat').one('click', function() {
        $(this).parent().parent().css('background-color','#faf5d5');
        $(this).parent().parent().after('<tr class="seating"><td colspan="6"><span class="closeseats"></span></td></tr>');
        $('tr.seating').css('background-color','#faf5d5');
    });
}); 


</script>

这个脚本正在添加我需要的行，并且还添加了关闭跨度。到现在为止还好。现在我想要点击“closeseats”类的跨度，应该删除添加的行。此外，请记住，这是一个列表。所以我有很多带有相同类别“按钮”的按钮。因此，在使用类别“closeseats”点击SPAN时，它应该只关闭相关的TR.SEATING。桌上的HTML就像这样：

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="listtable">
  <tr class="firstone">
<th align="left" valign="top">Bus Type</th>    
<th align="left" valign="top">Departure</th>
    <th align="left" valign="top">Duration</th>
    <th align="left" valign="top">Arrival</th>
    <th align="left" valign="top">Seats</th>
    <th align="left" valign="top">Fare</th>
  </tr>

  <tr>
<td align="left" valign="middle">Volvo, A/C, Seater</td>
    <td align="left" valign="middle"><img src="img/morning.png" /> <br />
9:00 PM</td>
    <td align="left" valign="middle">3h</td>
    <td align="left" valign="middle"><img src="img/evening.png" /> <br />
7:00 PM</td>
    <td align="left" valign="middle">4</td>
    <td align="left" valign="middle" class="amount">Rs. 460 <br /><br />
<input type="submit" class="selectseat" value="Select Seats" /><span class="ttip" title='this one <br> that one'><img src="img/plus.png" alt="plus"/></span></td>

</tr>

<tr>
<td align="left" valign="middle">Volvo, A/C, Seater</td>
    <td align="left" valign="middle"><img src="img/morning.png" /> <br />
9:00 PM</td>
    <td align="left" valign="middle">3h</td>
    <td align="left" valign="middle"><img src="img/evening.png" /> <br />
7:00 PM</td>
    <td align="left" valign="middle">4</td>
    <td align="left" valign="middle" class="amount">Rs. 460<br /><br />
<input type="submit" class="selectseat" value="Select Seats" /><span class="ttip" title="this one"><img src="img/plus.png" alt="plus"/></span></td>

</tr>

<tr>
<td align="left" valign="middle">Volvo, A/C, Seater</td>
    <td align="left" valign="middle"><img src="img/morning.png" /> <br />
9:00 PM</td>
    <td align="left" valign="middle">3h</td>
    <td align="left" valign="middle"><img src="img/evening.png" /> <br />
7:00 PM</td>
    <td align="left" valign="middle">4</td>
    <td align="left" valign="middle" class="amount">Rs. 460<br /><br />
<input type="submit" class="selectseat" value="Select Seats" /><span class="ttip" title="this one"><img src="img/plus.png" alt="plus"/></span></td>

</tr>



</table>

请帮忙。

Answer 1

您必须使用事件委派，因为您必须处理动态元素，.one()支持事件委派

$(function() {
    $('table.listtable').one('click', '.closeseats', function() {
        $(this).closest('tr.seating').remove();
    });
});

由脚本添加的行不删除

1 个答案: