获取动态创建的 Div 子文本

Question

我有一个大问题。我有这个由 PHP 生成的代码：

<div id="parent">
 <div id="child">Example text1</div>
 <a class="get_child_text">Get text</a>
</div>    

<div id="parent">
 <div id="child">Example text2</div>
 <a class="get_child_text">Get text</a>
</div>

<div id="parent">
 <div id="child">Example text3</div>
 <a class="get_child_text">Get text</a>
</div>

我想动态获取“父”div 中的“子”div 的文本，我点击了一个标签。简单地说，我想通过单击“get_child_text”来获取“子”文本。 例如，当我单击第三个“get_child_text”时，我想获得（例如在“警报”中）“示例 text3”。我试过：$('body').on('click', '.get_child_text', function() {(...)})，但它什么也没返回。请帮忙！

更新 好的，谢谢，但如果我有这种情况（有几个相同的“项目”div，但有其他文本内容：

<div class="item">
    <div class="foto"><a rel="example_group" href="upload/foto04.jpg"><img id="miniatura" style="border:2px solid #fff;" src="upload/foto04.jpg"/></a><br><div id="details1" style="display:none;"><br><a style="margin-top:4px;" rel="example_group" href="upload/foto04.jpg">Powiększ zdjęcie</a><br><a href="#" class="kup" style="font-weight:bold; font-size:12px;">Dodaj do koszyka</a></div></div>
    <div class="prawa_strona">
    <span id="id" style="display:none;">4</span>
    <div class="tytul" id="tytul">Przyk</div>
    <div id="opis1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet interdum ligula, eu rutrum purus. Nulla commodo justo et auctor sollicitudin. Nulla nibh lorem, mollis sit amet nisl sed, gravida fermentum mauris. Nullam dictum blandit interdum. Etiam pellentesque luctus elit, a semper nibh.</div>
    <div style="display:none;" id="opis_dlugi1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet interdum ligula, eu rutrum purus. Nulla commodo justo et auctor sollicitudin. Nulla nibh lorem, mollis sit amet nisl sed, gravida fermentum mauris. Nullam dictum blandit interdum. Etiam pellentesque luctus elit, a semper nibh. Aliquam vel purus tempus, porta magna ac, luctus erat. Integer ut dui metus. Aliquam blandit magna ac felis scelerisque fringilla quis nec eros. Fusce sit amet purus felis. Nunc posuere nisi eu mattis ullamcorper. </div>
    <div class="cena"><small>Cena: </small><b><span class="cena">2500</span> zł</b></div>
    <div class="more"><a href="#" class="wiecej_a1">Pokaż więcej...</a></div>
    </div>
    </div>

我想通过单击“.kup”标签来获取“.cena”跨度文本？

Answer 1

我建议，最简单的：

$('a.get_child_text').click(function(e){
    e.preventDefault();
    var divText = $(this).prev('div').text();
});

JS Fiddle demo（改编自提供的in the comments，纯粹是因为我更喜欢console.log()而不是alert()）。

但请注意，您有多个元素共享同一个 id，这是无效的 HTML。改用类。

如果您想改用on() 方法，那么我建议：

$(document).on('click', 'a.get_child_text', function(e){
    var divText = $(this).prev('div').text();
});

JS Fiddle demo.

但是，理想情况下，使用文档就绪页面上存在的父元素，以防止事件必须一直冒泡到document。

鉴于更新后的问题，以下 HTML（删除了一些内联 style 属性，一个阻止了被点击的项目可见）：

<div class="item">
    <div class="foto"><a rel="example_group" href="upload/foto04.jpg"><img id="miniatura" style="border:2px solid #fff;" src="upload/foto04.jpg"/></a>

        <br />
        <div id="details1">
            <br /> <a style="margin-top:4px;" rel="example_group" href="upload/foto04.jpg">Powiększ zdjęcie</a>

            <br />
            <a href="#" class="kup">Dodaj do koszyka</a>

        </div>
    </div>
    <div class="prawa_strona"> <span id="id" style="display:none;">4</span>

    <!-- stuff that doesn't matter, excised for brevity -->
        <div class="cena"><small>Cena: </small><b><span class="cena">2500</span> zł</b>

        </div>
        <div class="more"><a href="#" class="wiecej_a1">Pokaż więcej...</a>

        </div>
    </div>
</div>

我建议使用：

$('.kup').click(function(e){
    e.preventDefault();
    var cenaText = $(this).closest('.item').find('.cena').text();
    console.log(cenaText);
});

JS Fiddle demo.

参考资料：

• click()。
• closest()。
• find().
• prev()。
• text()。
• The global Structure of an HTML document: Element identifiers: the id and class attributes。