Question

更新：我目前仍然坚持使用此代码而不显示点击对话框：现在的问题是，当点击标题时没有任何反应。有任何想法吗？数据就在那里，当我拿走.hidden css类时，我可以看到它。

$(".showRow").click(function(){
    descId= $(this).data('id');
    $('#desc_'+descId).dialog({
        modal: true,
        width: 500
    });

});

我正在制作一个电视指南，当单击标题上的标题时，我想要一个弹出窗口显示标题的描述，但是我只能显示所有的描述，而不仅仅是单个的匹配标题，我将如何做到这一点？

HTML

 <table id="chart">
      <thead><th>Start</th><th>End</th><th>Title</th></thead><tbody><tr><td></td></tr></tbody>
    </table>
hidden {
    display: none;
}

的jQuery

 $.ajax({
        url: "xml/tvguide.xml" ,
        dataType: "xml" ,
        type: "GET",
        success: function(data) {
            rowNum = 1;
            $(data).find('tvguide channel[id="bbconemonday"] programme').each(function() {

            var title = $(this).find('title').text();
            var desc = $(this).find('desc').text();
            var start = $(this).find('start').text();
            var end = $(this).find('end').text();
            $('<tr data-id="'+rowNum+'" class="showRow"></tr>').html('<td>'+start+'</td><td>'+end+'</td><td title="'+desc+'">'+title+'<div class="hidden" id="desc_'+rowNum+'">'+desc+'</div></td>').appendTo('#chart');
            rowNum++

        });

XML SAMPLE

    <tvguide>
    <channel id="bbconemonday">
    <programme>
<desc>
The latest news, sport, business and weather from the BBC's Breakfast team. Also in HD. [S] Including regional news at 25 and 55 minutes past each hour.
</desc>
<title>Breakfast</title>
<end>0915</end>
<start>0600</start>
 </programme>
 <programme>
<desc>
13/20. Matt Allwright investigates the activities of conmen, revealing the fake batteries being used in mobile phones, cameras and laptops. Also in HD. [S]
</desc>
<title>Fake Britain</title>
<end>1000</end>
<start>0915</start>
 </programme>
 <programme>
<desc>
Martin Roberts and Lucy Alexander visit a cottage in Devon, a ground floor flat in London and a house in Lancashire. They find out how much each went for at auction. [S]
</desc>
<title>Homes Under the Hammer</title>
<end>1100</end>
<start>1000</start>
 </programme>
 <programme>
<desc>
8/10. Series which sees insurance fraudsters caught on camera. A convicted drug dealer thinks a bump on the head will give him a bumper payout. Also in HD. [S]
</desc>
<title>Claimed and Shamed</title>
<end>1130</end>
<start>1100</start>
 </programme>
 <programme>
<desc>
8/10. Documentary following life on the English Channel. A band of eco-fishermen from Weymouth help preserve the channel's fish stocks by using traditional fishing methods. Also in HD. [S]
</desc>
<title>Channel Patrol</title>
<end>1215</end>
<start>1130</start>
 </programme>
 <programme>
<subtitle>Horncastle</subtitle>
<desc>
Tim Wonnacott and the teams hunt for bargains in the historic town of Horncastle, and Tim pays a visit to the Birmingham Museum and Art Gallery. Also in HD. [AD,S]
</desc>
<title>Bargain Hunt</title>
<end>1300</end>
<start>1215</start>
 </programme>
<programme>
<desc>
The latest national and international news stories from the BBC News team, followed by weather. Also in HD. [S]
</desc>
<title>BBC News at One</title>
<end>1330</end>
<start>1300</start>
</programme>
<programme>
<desc>
The latest news, sport and weather from London. [S]
</desc>
<title>BBC London News</title>
<end>1345</end>
<start>1330</start>
</programme>
<programme>
<subtitle>Victim</subtitle>
<desc>
Drama series. A seemingly straightforward home visit takes an incredibly dark turn for Niamh. The documentary filming doesn't go to plan for Howard. Also in HD. [AD,S]
</desc>
<title>Doctors</title>
<end>1415</end>
<start>1345</start>
</programme>
<programme>
<desc>
8/10. The Ties of the Past: A life model is found murdered at the start of a painting class. Also in HD. [AD,S]
</desc>
<title>The Doctor Blake Mysteries</title>
<end>1510</end>
<start>1415</start>
</programme>
<programme>
<subtitle>West of Scotland</subtitle>
<desc>
Nicki Chapman travels through the west of Scotland, helping an animal-loving couple find their perfect country home. While there, Nicki tries her hand at curling. Also in HD. [AD,S]
</desc>
<title>Escape to the Country</title>
<end>1555</end>
<start>1510</start>
</programme>
<programme>
<desc>
3/6. Celebratory Food: Recipes include slow roast duck with aromatic crispy skin, and gin and tonic granita. Also in HD. [AD,S]
</desc>
<title>Tom Kerridge's Proper Pub Food</title>
<end>1625</end>
<start>1555</start>
</programme>
<programme>
<desc>
7/23. Tavistock: Paul Martin and the team visit sunny Tavistock where Phillip Serrell and Charlie Ross examine people's heirlooms. Paul takes a look around Endsleigh Gardens, just down the road. [S]
</desc>
<title>Flog It!</title>
<end>1715</end>
<start>1625</start>
</programme>
<programme>
<desc>
Quiz in which contestants try to score as few points as possible by plumbing the depths of their general knowledge to come up with the answers no-one else can think of. Also in HD. [S]
</desc>
<title>Pointless</title>
<end>1800</end>
<start>1715</start>
</programme>
<programme>
<desc>
The latest national and international news stories from the BBC News team, followed by weather. Also in HD. [S]
</desc>
<title>BBC News at Six</title>
<end>1830</end>
<start>1800</start>
</programme>
<programme>
<desc>
The latest news, sport and weather from London. [S]
</desc>
<title>BBC London News</title>
<end>1900</end>
<start>1830</start>
</programme>
<programme>
<desc>
If it's got Britain talking then it will get talked about on The One Show. Presented by Matt Baker and Alex Jones. Also in HD. [S] Then BBC News.
</desc>
<title>The One Show</title>
<end>2000</end>
<start>1900</start>
</programme>
<programme>
<desc>
8/20. School-based drama. Allie convinces Vaughan to send Justin to a boarding school in an attempt to keep him away from Tiffany but the young lovers have plans of their own. Also in HD. [AD,S]
</desc>
<title>Waterloo Road</title>
<end>2100</end>
<start>2000</start>
</programme>
<programme>
<desc>
9/14. Ten Years of Discount Buying: To test their negotiation skills, the candidates must buy nine items which have featured in previous years' tasks at the best possible prices. Also in HD. [S]
</desc>
<title>The Apprentice</title>
<end>2200</end>
<start>2100</start>
</programme>
    </channel>
    </tvguide>

编辑：在Silverhunter代码中添加。仍然停留在.click

上

Answer 1

如果你的每个函数都正常工作并且每次迭代正确地传播你的表行一个数据项，那么我会尝试以下。

设置隐藏的div以包含您的描述。在你的css中创建一个名为hidden的类

.hidden {
    display: none;
}

在附加的表格行中添加隐藏的div，并添加我们可以在ID中使用的标识符。我称之为rowNum。我们rowNum来识别我们的描述div。为了让系统知道要显示哪个描述div，我们还将rowNum放在我们的tr数据属性中，以便在点击时检索。

$.ajax({
        url: "xml/tvguide.xml" ,
        dataType: "xml" ,
        type: "GET",
        success: function(data) {
            rowNum = 1;
            $(data).find('tvguide channel[id="bbconemonday"] programme').each(function() {

            var title = $(this).find('title').text();
            var desc = $(this).find('desc').text();
            var start = $(this).find('start').text();
            var end = $(this).find('end').text();
            $('<tr data-id="'+rowNum+'" class="showRow"></tr>').html('<td>'+start+'</td><td>'+end+'</td><td title="'+desc+'">'+title+'<div class="hidden" id="desc_'+rowNum+'">'+desc+'</div></td>').appendTo('#chart');
            rowNum++

        });
    });

在Ajax函数之外设置单击处理程序以处理单击的任何行。因为我们在我们的tr中放置了一个具有我们需要的ID的数据属性，所以我们可以使用它来访问我们的描述div。

$("#chart").on('click', 'tr.showrow', function(){
    descId= $(this).data('id');
    $('#desc_'+descId).dialog({
        modal: true,
        width: 500
    });

});

Answer 2

尝试使用on代替click事件处理程序，如下所示

$("table").on('click','.showRow',function(){
descId= $(this).data('id');
$('#desc_'+descId).dialog({
    modal: true,
    width: 500
});

}）;

.Dialog没有显示在表格单元格上

2 个答案: