当前位置: 首页 > 面试题库 >

如何在Ajax加载的Content上绑定事件?

沈开畅
2023-03-14
问题内容

我有一个链接,该链接myLink应将AJAX加载的内容插入divHTML页面的(appendContainer)。问题是click我绑定到jQuery
的事件没有在插入到appendedContainer中的新加载的内容上执行。该click事件绑定到未随我的AJAX函数加载的DOM元素上。

我必须更改什么才能绑定事件?

我的HTML:

<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>

我的JavaScript:

$(".LoadFromAjax").on("click", function(event) {
    event.preventDefault();
    var url = $(this).attr("href"),
        appendedContainer = $(".appendedContainer");

    $.ajax({
    url: url,
    type : 'get',
    complete : function( qXHR, textStatus ) {           
        if (textStatus === 'success') {
            var data = qXHR.responseText
            appendedContainer.hide();
            appendedContainer.append(data);
            appendedContainer.fadeIn();
        }
      }
    });

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

要加载的内容:

<div>some content</div>
<a class="mylink" href="otherurl">Link</a>

问题答案:

将事件委托用于动态创建的元素:

$(document).on("click", '.mylink', function(event) { 
    alert("new link clicked!");
});

这不实际工作,这里就是我附加了该类锚的例子.mylink,而不是data-
http://jsfiddle.net/EFjzG/



 类似资料:
  • 本文向大家介绍动态加载的li如何绑定事件?相关面试题,主要包含被问及动态加载的li如何绑定事件?时的应答技巧和注意事项,需要的朋友参考一下 如果是原生js 或者 用的jq的话可以用事件代理的方式处理。把父级元素下面所有的li绑定事件 ` var item1 = document.getElementById("id1"); var item2 = document.getElementById("

  • 问题内容: 我正在使用.load()函数加载具有某些jQuery功能且绑定到某个类的html部分。= / 有什么想法吗? 问题答案: 使用现场活动: jQuery保留了所有活动选择器的存储库,例如本例。并且它向文档添加了一个处理程序,以侦听冒泡到文档中的事件。然后,此特殊处理程序基本上会遍历所有活动选择器,并将事件转发到与活动选择器匹配的那些元素(如果有)。 如果任何中间事件处理程序拦截了该事件,

  • 问题内容: 我的页面上有一些CSS类=“ hello”的Divs。此外,我使用Ajax通过CSS class =“ hello”来获取更多Divs。我有一段代码被称为Divs的Click事件,如下: 从一开始,它就可以与我页面中存在的Divs一起正常工作,但不适用于使用Ajax加载的Divs。为了将这小段代码与新加载的Divs绑定在一起,我需要做些什么吗? 问题答案: 您应该用来将处理程序绑定到绑

  • 这里的例子是——https://facebook.github.io/react/tips/initial-ajax.html -修改如下。 是加载时的“占位符”,并传递给

  • 问题内容: 我熟悉以普通方式在jQuery中使用ajax。 我已经玩了一段时间了,但是不了解Wordpress使其正常工作需要 什么… 我在这里所摘录的内容来自一些教程或文章。 这在 functions.php中 (在子主题中): jQuery本身正在加载并正常工作。 我已经尝试过一些基本的ajax,如下所示: 除此之外,我不知道如何测试以确保它是否从一开始就正确地加载了…… 在这里的任何帮助,将

  • 问题内容: 该主题很好地描述了我的问题,我假设它不会以这种方式起作用,是否有办法使其起作用?(解决方法)? 这是通过AJAX加载的代码: 这是我的点击事件: 问题答案: 做这个。 要么 编辑: 从jQuery 1.7开始,不推荐使用.live()方法。 使用.on()附加事件处理程序。较旧版本的jQuery的用户应使用.delegate()。