获取动态创建的Div子文本

时间:2013-09-09 21:20:16

标签: php jquery html dynamic click

我有一个大问题。我有这个由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>

我想动态获取“child”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”跨文本?

1 个答案:

答案 0 :(得分:4)

我建议,最简单的说法是:

$('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属性,一个,这些属性阻止了该项目被点击)):< / p>

<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

参考文献: