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属性。 click事件绑定到锚点，因此在单击处理程序this中将是单击的锚点。

当前代码工作的原因“在图片外部但在锚标记内点击”是因为在这种情况下e.target是锚本身。

Answer 2

在id选择器前加一个空格，使行显示为：

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

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

2 个答案: