jquery - 无法选择内部带有“img 标签”的“a 标签”来运行 AJAX 功能

Question

我正在运行一个调用外部页面的 ajax 函数，但无法选择其中包含图像的锚标记。该功能在它是纯文本时起作用，但一旦里面有图像，它就会停止运行（除非在图像外部但在锚标记内单击时）。

html是这样的。

    <div id="add_content">
        <a href="page_1.html"> Text works fine</a>
        <a href="page_2.html"><img src="thumbnail.jpg"/>Image doesn't work</a>
    </div>

    <div id="insert_here"> </div>

一个示例外部页面是

    <div id="thumbnails">
        <img src="images/1.jpg"/>
        <img src="images/2.jpg"/>
        <img src="images/3.jpg"/>
    </div>

我正在运行的脚本是

       $(document).ready(function (){
            $('#add_content a').click(function(e){
                e.preventDefault();
                $('#insert_here').load(e.target.href + '#thumbnails').hide().delay(100).fadeIn(500);
            });
       });

Answer 1

更改e.target.href为this.href：

$('#insert_here').load(this.href + '#thumbnails').hide().delay(100).fadeIn(500);

如果您单击子图像，e.target则将是该图像，并且该图像没有href属性。单击事件绑定到锚点，因此在单击处理程序this中将是被单击的锚点。

您当前的代码“在图像外部但在锚标记内单击时”起作用的原因是因为在这种情况下e.target是锚本身。

Answer 2

在 id 选择器之前放置一个空格，以便该行显示：

$('#insert_here').load(e.target.href + ' #thumbnails')