将click函数附加到新的ajax请求数据

时间：2013-06-09 19:38:48

标签： javascript ajax jquery

我的脚本有一些问题：

  1. 它不会将点击功能附加到新元素

  2. 不会加载包含内联java的元素

    3. 我的目标是在从网址中删除#时，在点击功能上创建一个包含实时页面更改和左右滑动方法的网站。

    这是我的代码：

    $(function(){

    if (Modernizr.history) {

        var newHash = "",
            $mainContent = $("#main-content"),
            $pageWrap = $("#page-wrap"),
            baseHeight = 0,
            $el;
        $panel = $("#panel");

        $panel.visible = false;

        $pageWrap.height($pageWrap.height());
        baseHeight = $pageWrap.height() - $mainContent.height();

        $("li").delegate("a", "click", function () {
            _link = $(this).attr("href");
            history.pushState(null, null, _link);
            ajaxcontent();
            loadContent(_link);
            return false;
        });

        function ajaxcontent(href) {
            var content = $('#guts' + href).html();
            $("#page-wrap").stop().css("position", "relative").animate({
                left: "3000px"
            }, 1000, 'easeOutSine', function () {});
        }

        function loadContent(href) {
            $mainContent.find("#guts").fadeOut(200, function () {
                $mainContent.load(href + " #guts", function () {
                    $mainContent.fadeIn(200, function () {
                        $pageWrap.animate({
                            height: baseHeight + $mainContent.height() + "px"
                        });
                        jQuery("#page-wrap").css({
                            display: "block",
                            left: "-3000px"
                        }).animate({
                            left: "0px"
                        }, 1000, 'easeOutSine');
                    });

                    $("li a[href*='+href+']").removeClass("current");
                    console.log(href);
                    $("li a[href*='+href+']").addClass("current");
                });

            });
        }

        $(document).bind('popstate', 'guts', function (e, data) {

            _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
            loadContent(_link);
        });

    } // otherwise, history is not supported, so nothing fancy here.

});

    这是位于文件im上的头部，包括

    <script type="text/javascript">
var CCM_DISPATCHER_FILENAME = '/get-installed-today/index.php';
var CCM_CID = 144;
var CCM_EDIT_MODE = false;
var CCM_ARRANGE_MODE = false;
var CCM_IMAGE_PATH = "/get-installed-today/concrete/images";
var CCM_TOOLS_PATH = "/get-installed-today/index.php/tools/required";
var CCM_BASE_URL = "http://dralarm.net";
var CCM_REL = "/get-installed-today";

</script>


<link rel="stylesheet" type="text/css" href="/get-installed-  today/concrete/css/ccm.base.css?v=70f0a7a04670ba4505c2723bfe639897" />
<script type="text/javascript" src="/get-installed-today/concrete/js/jquery.js?v=70f0a7a04670ba4505c2723bfe639897"></script>
<script type="text/javascript" src="/get-installed-today/concrete/js/ccm.base.js?v=70f0a7a04670ba4505c2723bfe639897"></script>
<style type="text/css"> 
#blockStyle562MainBodyLayout4Cell134 {background-repeat:no-repeat; margin:0 0 5px 0; padding:0 0 5px 0; } 
#blockStyle979MainBodyLayout7Cell244 {background-repeat:no-repeat; margin:0 5px 5px 5px; padding:0 5px 5px 5px; } 
#blockStyle1192MainBodyLayout7Cell143 {background-repeat:no-repeat; margin:0 5px 5px 5px; padding:0 5px 5px 5px; } 
#blockStyle1193MainBodyLayout7Cell344 {background-repeat:no-repeat; margin:0 5px 5px 5px; padding:0 5px 5px 5px; } 
#id1 {background-repeat:no-repeat; } 
#ccm-layout-mainbody-248-7 .ccm-layout-col-spacing { margin:0px 5px } 
#ccm-layout-mainbody-249-3 .ccm-layout-col-spacing { margin:0px 3px } 
#ccm-layout-mainbody-198-10 .ccm-layout-col-spacing { margin:0px 10px } 
</style>
<style type="text/css"> 
#blockStyle934Main63 {background-color:#ed0303; background-repeat:repeat-x; } 
</style>
<style type="text/css"> 
#blockStyle1190Main64 {background-image: url('/get-installed-    today/files/5213/7022/9692/sidebar-red270.png'); background-repeat:repeat-x; } 
</style>
<link rel="stylesheet" type="text/css" href="/get-installed-today/concrete/blocks/form/view.css?v=70f0a7a04670ba4505c2723bfe639897" />
<link rel="stylesheet" type="text/css" href="/get-installed-today/concrete/blocks/slideshow/view.css?v=70f0a7a04670ba4505c2723bfe639897" />

    这是身体

    <div id="ccm-layout-wrapper-4786" class="ccm-layout-wrapper">
<div id="ccm-layout-mainbody-69-4" class="ccm-layout ccm-layout-table  ccm-layout-name-MainBody-Layout-4 ">
<div class="ccm-layout-row ccm-layout-row-1"><div class="ccm-layout-69-col-1 ccm-layout-cell ccm-layout-col ccm-layout-col-1 first" style="width:100%"> <div id="blockStyle562MainBodyLayout4Cell134" class=" ccm-block-styles" >

<script type="text/javascript">
//<![CDATA[
var ccmSlideShowHelper562 = {

bID:562,
imgNum:0,

init:function(){
    this.displayWrap=$('#ccm-SlideshowBlock-display'+this.bID); 
    if(this.imgInfos.length==0){
        //alert('There are no images in this slideshow');
        return false;
    }
    var maxHeight=0;
    for(var i=0;i<this.imgInfos.length;i++){
        this.addImg(i);
        if(maxHeight==0 || this.imgInfos[i].imgHeight > maxHeight)
            maxHeight=this.imgInfos[i].imgHeight;
    }
    this.displayWrap.css('height',maxHeight);


    //center images
    for(var i=0;i<this.imgInfos.length;i++){ 
        if( this.imgInfos[i].imgHeight < maxHeight){
            var t=((maxHeight - this.imgInfos[i].imgHeight)/2);
            this.imgEls[i].css('top',t);
        }
    }
    this.nextImg();
}, 
nextImg:function(){ 
    if(this.imgNum>=this.imgInfos.length) this.imgNum=0;  
    this.imgEls[this.imgNum].css('opacity',0);
    this.imgEls[this.imgNum].css('display','block');
    this.imgEls[this.imgNum].animate({opacity:1},
        this.imgInfos[this.imgNum].fadeDuration*1000,'',function(){ccmSlideShowHelper562.preparefadeOut()});
    var prevNum=this.imgNum-1;
    if(prevNum<0) prevNum=this.imgInfos.length-1;
    if(this.imgInfos.length==1) return;
    this.imgEls[prevNum].animate({opacity:0},this.imgInfos[this.imgNum].fadeDuration*800,function(){this.style.zIndex=1;});         
},
preparefadeOut:function(){
    if(this.imgInfos.length==1) return;
    var milisecDuration=parseInt(this.imgInfos[this.imgNum].duration)*1000;
    this.imgEls[this.imgNum].css('z-index',2);
    setTimeout('ccmSlideShowHelper'+562+'.nextImg();',milisecDuration);
    this.imgNum++;
},
maxHeight:0,
imgEls:[],
addImg:function(num){
    var el=document.createElement('div');
    el.id="slideImgWrap"+num;
    el.className="slideImgWrap"; 
    if(this.imgInfos[num].fullFilePath.length>0)
         imgURL=this.imgInfos[num].fullFilePath;
    else imgURL='/get-installed-today/files/'+this.imgInfos[num].fileName; 
    //el.innerHTML='<img src="'+imgURL+'" >';
    el.innerHTML='<div style="height:'+this.imgInfos[num].imgHeight+'px; background:url(\''+escape(imgURL)+'\') center no-repeat">&nbsp;</div>';
    //alert(imgURL);
    if(this.imgInfos[num].url.length>0) {
        //el.linkURL=this.imgInfos[num].url;
        var clickEvent='onclick="return ccmSlideShowHelper562.imgClick( this.href  );"';
        el.innerHTML='<a href="'+this.imgInfos[num].url+'" '+clickEvent+' >'+el.innerHTML+'</a>';           
    }
    el.style.display='none';
    this.displayWrap.append(el);
    var jqEl=$(el);
    this.imgEls.push(jqEl);
},
imgClick:function(linkURL){
    //override for custom behavior
},
imgInfos:[
            {
            fileName:"home-security-02.jpg",
            fullFilePath:"/get-installed-today/files/8013/6798/3067/home-security-02.jpg",
            duration:5,
            fadeDuration:2,     
            url:"",
            groupSet:0,
            imgHeight:300           }
    ,           {
            fileName:"protect-04-1.png",
            fullFilePath:"/get-installed-today/files/3413/6796/1826/protect-04-1.png",
            duration:5,
            fadeDuration:2,     
            url:"",
            groupSet:0,
            imgHeight:278           }
    ,           {
            fileName:"home-security.jpg",
            fullFilePath:"/get-installed-today/files/9213/6796/1210/home-security.jpg",
            duration:5,
            fadeDuration:2,     
            url:"",
            groupSet:0,
            imgHeight:300           }
        ]
}
$(function(){ccmSlideShowHelper562.init();}); 
//]]>
</script>

<div id="ccm-SlideshowBlock-display562" class="ccm-SlideshowBlock-display">
<div id="ccm-SlideshowBlock-heightSetter562" class="ccm-SlideshowBlock-heightSetter">        </div>
<div class="ccm-SlideshowBlock-clear" ></div>
</div>
</div></div>

    这是由具体的5

    构建的幻灯片

1 个答案:

答案 0 :(得分：0)

使用jQuery .live()绑定对javascript生成/创建内容的操作。

例如：

$('#some_new_item').live('click', function() {
  console.log('Hey, stop poking!');
});
相关问题
最新问题