0

我已经使用了一个脚本，我在点击一个类时添加了一行。我在添加的行内添加了一个紧密的跨度。但是当我尝试为关闭类创建一个 onlick 事件以关闭添加的行时，它不起作用。这是添加行和添加到其中的关闭类的脚本：

<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”类的跨度时，应该删除添加的行。另外，请记住这是一个列表。所以我有很多具有相同类别“selectseat”的按钮。因此，点击“closeseats”类的跨度，它应该只关闭相关的 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>

请帮忙。

4

1 回答 1

0

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

$(function() {
    $('table.listtable').one('click', '.closeseats', function() {
        $(this).closest('tr.seating').remove();
    });
});
于 2013-08-12T12:25:06.530 回答