Question

我有以下HTML代码：

<div id="result1" class="result">
    ... some html ...
    ... <a href="javascript:updateNext(this, uri);">link</a>
    ... some html ...
</div>
<div id="result2" class="result">
    ... some html ...
    ... <a href="javascript:updateNext(this, uri);">link</a>
    ... some html ...
</div>
<div id="result3" class="result">
</div>
<div id="result4" class="result">
</div>

目标是在点击链接时更新下一个div的内容。例如，当我点击＃result2中的链接时，＃result3的内容将被更新。

这是javascript函数：

<script>
            function updateNext(elem, uri) {
                    $.ajax({
                            url: uri,
                            success: function(data) {
                                    elem.closest('.result').nextAll().html('');
                                    elem.closest('.result').next().html(data);
                            }
                    });
            }
</script>

但是，当我使用链接时，elem被设置为窗口，而不是链接本身。

div的内容是由服务器生成的，服务器不应该知道他生成的代码所在的div的位置。

我也试过

 <a href="javascript:" onclick="updateNext(...

没有其他结果......

任何想法？： - ）

谢谢，

阿诺。

Answer 1

为什么在使用jQuery时使用内联脚本？我为你设置了一个符合你需要的小提琴：http://jsfiddle.net/eLA3P/1/

示例代码：

$('div.result a').click(function() {
    $(this).closest('div.result').next().html('test');

    return false;
});

Answer 2

在this中使用时，

href会返回该窗口，但此处会返回实际链接：

   ... <a href="#" onclick="updateNext(this, 'new');">link</a>

不要忘记在：

中使用jQuery $

    $(elem).closest('.result').nextAll().html('');
    $(elem).closest('.result').next().html(data);

Answer 3

首先，您必须删除这些href="javascript:..."属性。请不要再使用它们，它们是邪恶的。

然后，通过jQuery绑定一个单击处理程序，您可以使用它：

// since you dynamically self-update the a elements, use "live()":
$("div.result a").live("click", function () {
  var $myDiv = $(this).closest("div.result");
  $.ajax({
    url: "/build/some/url/with/" + $myDiv.attr("id"),
    success: function(data) {
      $myDiv.next("div.result").html(data);
    }
  });
  return false;
});

完成。

Answer 4

尝试使用jQuery绑定事件，而不是在href中添加javascript链接。

<div id="result1" class="result">
  <a href="#" class="resultLink">link</a>
</div>

$('.resultLink').click(function(){
   var elem = $(this);
   $.ajax({
     url: uri,
     success: function(data) {
       elem.closest('.result').nextAll().html('');
       elem.closest('.result').next().html(data);
     }
   });
});

Answer 5

你应该这样做：

http://jsfiddle.net/hJhC7/

内联JavaScript已经消失，而href正用于存储“uri”，无论可能是什么。我假设每个链接都不同。

//remove this行只是让$.ajax与jsFiddle一起使用。

$('.update').click(function(e) {
    e.preventDefault();
    var elem = $(this);

    $.ajax({
        type: 'post', //remove this
        data: {html: Math.random() }, //remove this

        url: $(this).attr('href'),
        success: function(data) {
            //not sure why you're doing this
            //elem.closest('.result').nextAll().html('');
            elem.closest('.result').next().html(data);
        }
    });
});

使用此HTML：

<div id="result1" class="result">
    <a href="/echo/html/" class="update">link</a>
</div>
<div id="result2" class="result">
    <a href="/echo/html/" class="update">link</a>
</div>
<div id="result3" class="result">
    <a href="/echo/html/" class="update">link</a>
</div>

如何检测单击javascript函数链接的div

5 个答案: