Question

最初，当我在我的网页上都有静态元素（相同类但不同的ID）时，下面是我正在使用的jquery，它正常工作。

<script>
$(document).ready(function () {
    $('.swipe').each(function () {
        var pdid=$(this).attr('id');
        //create a closure variable instead of a global one
        var Slider = $(this).Swipe({
            continuous: false,
            stopPropagation: true,
            callback: function (index, elem) {
            lid=index+1;
            },
        }).data('Swipe');

        //use relative tranversal to find the next/prev elements
        $(this).next().next('.next').click(function (data) {
            Slider.next();
            $("#fimg_"+pdid).val($("#"+pdid+"_"+lid).data('src'));
            // alert($("#"+pdid+"_"+lid).data('src'));

        });

        //try using $.proxy
        $(this).next('.prev').click(function(data) {
            $.proxy(Slider.prev());
            $("#fimg_"+pdid).val($("#"+pdid+"_"+lid).data('src'));
        });
    });


    $(".approveid").click(function(){
        var adid=$(this).attr('id').slice(8);
        alert(adid);
        $("#share_rss_form_"+adid).submit();

    });


     $(".category").change(function() {

        // Get the value of the option that was chosen
        // You could also do: var currentValue = this.options[this.selectedIndex].value;
        var currentValue = $(this).val();
        var cid=$(this).attr('id').slice(9);
        // Don't do anything if the "Please select" option was chosen
        if (currentValue == '0') {
          return;
        }

        // Load some data from the server into the next <div>

        $.get('../abc_options.php?cat='+currentValue, function( data ) {
            $("#selectTags"+cid).prepend(data);
            $("#selectTags"+cid).trigger('liszt:updated');
        });

      });


    $('.selectTags').chosen();
    // $('#selectTags1').trigger('chosen:updated');

    $('.share_rss_form').each(function(index,e1){
        $(e1).validate({
            errorClass: "error",
            validClass: "success",
            highlight:function(element, errorClass, validClass) {
                $(element).parent().addClass(errorClass).removeClass(validClass);
             },
            unhighlight:function(element, errorClass, validClass) {
                $(element).parent().addClass(validClass).removeClass(errorClass);
             },
            submitHandler: function(form) { 
                alert(form.id)      ;
                $(form).ajaxSubmit();
                // return true;

            }
        });

    });

    $('.loadNext').click(function(){
        window.location.replace("abc"+$(this).attr('id')+".htm"); 

    });

});

</script>

但是，我现在需要动态生成这些静态HTML元素。这就像使用.post到网址并点击按钮获取整个内容。上面的jquery似乎没有绑定到动态创建的元素。

虽然我正在研究jquery .live和.on的选项，但我不确定如何将上面的代码转换为在运行时绑定到我的动态元素。据我所知，.on适用于某些事件，如“点击”，但如果你看到上面的jquery代码，我没有为每个人点击事件（例如：swipe，selectTags，shareRSSForm）。

有人可以帮我们告诉我如何将上面的代码转换为在运行时绑定到动态创建的元素吗？

更新后的问题：我的下一个按钮编码如下

 $('.loadNext').on('click',function(){
         $('#loadNextVal').val(parseInt($('#loadNextVal').val())+parseInt(1));

            $("#share_rss_form_load").load("RSSFeeds/abc3.htm #share_rss_form_"+$('#loadNextVal').val());

            //alert(1)
 runMyCode($("#share_rss_form_load").load("RSSFeeds/abc3.htm #share_rss_form_"+$('#loadNextVal').val()));


    });

，HTML代码是下一步

当我单击下一个按钮时，动态内容被加载，但是jquery没有立即绑定到它，当我再次单击Next按钮加载下一个元素时，几分之几秒，jquery被绑定到前一个在更改为下一个动态元素之前动态创建元素。它看起来像元素存在之前的过早绑定或绑定的问题，因为如果我在其间放置一个警告框（如上所示），它可以正常工作

请帮忙

UDATED：我的runMycode函数

function runMyCode(parent){ 
    $('.swipe',$(parent)).each(function () {
        var pdid=$(this).attr('id');
        //create a closure variable instead of a global one
        var Slider = $(this).Swipe({
            continuous: false,
            stopPropagation: true,
            callback: function (index, elem) {
            lid=index+1;
            },
        }).data('Swipe');

        //use relative tranversal to find the next/prev elements
        $(this).next().next('.next').click(function (data) {
            Slider.next();
            $("#fimg_"+pdid).val($("#"+pdid+"_"+lid).data('src'));
            // alert($("#"+pdid+"_"+lid).data('src'));

        });

        //try using $.proxy
        $(this).next('.prev').click(function(data) {
            $.proxy(Slider.prev());
            $("#fimg_"+pdid).val($("#"+pdid+"_"+lid).data('src'));
        });
    });





    $('.selectTags',$(parent)).chosen();
    // $('#selectTags1').trigger('chosen:updated');

    $('.share_rss_form',$(parent)).each(function(index,e1){
        $(e1).validate({
            errorClass: "error",
            validClass: "success",
            highlight:function(element, errorClass, validClass) {
                $(element).parent().addClass(errorClass).removeClass(validClass);
             },
            unhighlight:function(element, errorClass, validClass) {
                $(element).parent().addClass(validClass).removeClass(errorClass);
             },
            submitHandler: function(form) { 
                alert(form.id)      ;
                $(form).ajaxSubmit({ 
                    success: function(data) { 
                        alert(data);
                    } 
                });
                // return true;

            }
        });

    });

}

Answer 1

你可以像这样使用

    $("body").on("click",".approveid",function(){
       var adid=$(this).attr('id').slice(8);
       alert(adid);
       $("#share_rss_form_"+adid).submit();
    });

Answer 2

我在向ajax加载的内容中添加jquery ui按钮时遇到了同样的问题。这就是我所做的：

创建一个运行代码的函数：

function runMyCode(parent){ 
    $('.swipe',$(parent)).each(...);
}

然后在你的ajax / post成功回调中：

success:function(data){
  //data is what you have loaded from server
  runMyCode(data);
}

更新：针对新问题

$('.loadNext').on('click', function () {
    var loadNextVal = parseInt($('#loadNextVal').val());
    $('#loadNextVal').val(loadNextVal + parseInt(1));

    $.load("RSSFeeds/abc3.htm #share_rss_form_" + loadNextVal,function(data){
        runMyCode(data);
        ("#share_rss_form_load").html(data);
    });
});

更新：查看是否有错误

$("#share_rss_form_load").load("RSSFeeds/abc3.htm #share_rss_form_" + loadNextVal,
    function (response, status, xhr) {
        if (status == "error") {
            console.log(xhr.status + " " + xhr.statusText);
        } else
            runMyCode(response);
    });

将jquery代码绑定到运行时动态创建的元素

2 个答案: