无法选择包含"img tag"的"a tag"来运行 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')