0

jQuery を使用して、動的に追加されたリスト要素に .on() 関数を追加しました。私が直面している問題は、クリックをトリガーするボタンが動的に追加された li 要素内にあるため、

$(this).parent().text()

ボタンのテキストだけでなく、li 要素からのテキストも返します。

次のフィドルを参照してください: http://jsfiddle.net/TL5TR/

この問題を回避し、li テキストのみ (ボタン テキストなし) を表示するにはどうすればよいですか? ボタンが li タグの外側に配置されるように、コードを作り直す必要がありますか?

アップデート

これらの回答の1つを受け入れる前に、すべてがうまくいっているので、ありがとうございます。また、1つの方法または他の方法を使用することの長所/短所を説明してもらえますか?つまり、textNodeとspanタグです。

4

6 に答える 6

1

textNodeクリックされたボタンの前の兄弟である場合は、previousSiblingプロパティを使用できます。

$("#list").on('click', 'button', function() {
    alert(this.previousSibling.nodeValue);
});

http://jsfiddle.net/cZk8H/

于 2013-07-14T16:45:53.343 に答える
1

スパンでラップされたテキストを追加してみてください。そして、後で兄弟の価値に簡単に対処する必要があります。

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
          $('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");
        });


$("#list").on('click', 'button', function() {
      alert($(this).siblings().text());
    });

http://jsfiddle.net/TL5TR/1/

長所 (span の使用): li 内のテキストの管理が改善されます。実際には、常にスパンで囲まれたコンテンツを参照します....

長所（スパンを使用しないことの）：世話をする必要があるHTMLのタグが少ない。この場合、それについて考えるのはもっとミクロな管理だと思います。

于 2013-07-14T16:46:33.457 に答える
1

span最も簡単な解決策は、テキストを追加することだと思います。

$('#list').append("<li><span>" + item + "</span><button class='clickme'>Click me</button></li>");

その後：

$(this).siblings("span").text()
于 2013-07-14T16:46:36.417 に答える
1 
var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
          $('#list').append("<li><span>" + item + "</span> <button class='clickme'>Click me</button></li>");
        });


$("#list").on('click', 'button', function() {
      alert($(this).parent().find("span").text());
    });

テキストをスパンタグに入れる

http://jsfiddle.net/TL5TR/2/

于 2013-07-14T16:50:25.137 に答える
0

または、分離する代わりに、次のようにすることもできます。

var array = ["First", "Second", "Third"];
$.each(array, function(index, item) {
    $("<li>" + item + " <button class='clickme'>Click me</button></li>")
       .appendTo('#list')
       .on('click', function() { alert(item); });
});

もちろん、これらを他の方法で追加している場合を除きます。次に、他の提案された回答のいずれかを使用します。

于 2013-07-14T16:51:06.743 に答える
0

要素を複製して、子要素を削除できます。

$(this).parent().clone().children().remove().end().text()
于 2013-07-14T16:51:34.860 に答える