Question

我加载了一个由Ajax存储在XML文件中的HTML块，这个HTML包含一个标记，click事件应该在该标记上执行某些操作。

$.ajax({
            type: "GET",
            async:false,
            url: "/js/content/cookiesBandeauContent.xml",
            dataType: "xml",
            success: function (xml) {
                    // Parse the xml file and get data
                   //var xmlDoc = $.parseXML(xml),
                    $xml = $(xml);

                   $("body").prepend($xml.find(sLang+" paragraphContent").text());

            }
        });

基本上，加载的HTML看起来像这样：

<div id='background_cookies'>
      <div id='cookies'>
           <p class='cookies'>XXXXXXXX<a class='cookiesPolicy' href='/cookies_policy/cookies_policy.aspx' target='_blank'>Politique de Cookies</a>.<br>
            XXXX<a class='cookiesSettings' href='/cookies_settings/cookies_settings.aspx' target='_blank'>Paramètres des Cookies</a>.
           </p>
            <a class='cookies_continue' href='#'>Continuer</a>
       </div>
</div>

单击事件在文档准备中声明：

$("div#cookies a.cookies_continue").click(function(e) {

    e.preventDefault();
    $("div#cookies").fadeOut();
});

提前感谢您的帮助

Answer 1

您需要在ajax调用后附加html后绑定事件。如果动态附加内容，则需要在追加事件后绑定事件。

function BindEventCookie() {
    $("div#cookies a.cookies_continue").click(function(e) {

        e.preventDefault();
        $("div#cookies").fadeOut();
    });
}

$.ajax({
        type: "GET",
        async:false,
        url: "/js/content/cookiesBandeauContent.xml",
        dataType: "xml",
        success: function (xml) {
                // Parse the xml file and get data
               //var xmlDoc = $.parseXML(xml),
                $xml = $(xml);

               $("body").prepend($xml.find(sLang+" paragraphContent").text());
               BindEventCookie();

        }
    });

<强>更新

我做了一个工作小提琴：http://jsfiddle.net/e42d703o/

Answer 2

成功函数中的

      success: function (xml) {
                // Parse the xml file and get data
               //var xmlDoc = $.parseXML(xml),
                $xml = $(xml);

               $("body").prepend($xml.find(sLang+" paragraphContent").text());

        }

使用“on”jquery函数

添加处理程序

$("div#cookies a.cookies_continue").on('click', function(e) {

    e.preventDefault();
    $("div#cookies").fadeOut();
});

这比简单的点击处理程序更实用，据我所知

Answer 3

  $("div#cookies").on('click','a.cookies_continue', function(e) {
        $("div#cookies").fadeOut();
        return false;
    });

Click事件不适用于Ajax加载的标记

3 个答案: