。對話框未顯示在表格單元格上

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樣本

    <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的數據屬性，所以我們可以使用它訪問我們的description 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
});

}）;