Question

我在内部使用简单的滑块，内容加载了Jquery.load（），当您单击我的投资组合页面上的缩略图时，会调用该内容。问题是，当您第一次单击缩略图并加载内容时，滑块不起作用，但如果您使用滑块关闭div并重新打开缩略图以重新打开它，它将开始工作。我觉得它与Jquery.load（）有关。这是网站iancramergraphics.com/new

抱歉这是我第一次在论坛上发帖，所以我不得不习惯以最好的方式提出我的问题。我之前没有创建自己的js小提琴，我不知道如何包含我的jquery ajax调用。这是我的.js和html（我希望这足以帮助你理解）

$(document).ready(function() {
var id = $(this).attr("id");

$('.thumbnails div').click(function() {

    $('.portfolioDisplay').slideDown('fast');
    $("#slider").load('portfolio/' + id + ".html #slider > *");


    $("#slider").easySlider({
        continuous: true,
        nextText: "",
        prevText: ""
    });
}
});

我尝试在（文件）.ready中移动easyslider声明，但没有运气

谢谢你

html没有发布最后一个。这是

<div class="thumbnails">
<div id="zubrickyremodeling"><img src="images/thumbnails/zubricky.png" alt="Zubricky            Remodeling" /></div>
</div>

Answer 1

你是在加载dinamically的内容上绑定插件，你需要这样的东西http://docs.jquery.com/Plugins/livequery（非常轻量级）

然后你可以这样做：

$("#slider").load(url);

$.livequery(function(){
$("#slider").easySlider({
        continuous: true,
        nextText: "",
        prevText: ""
    });
});

或更好（应该工作）使用ajax而没有我链接到的插件：

$('.thumbnails div').on('click',function() {
    $.ajax({
    url:'http://www.yoursite.com/portfolio/' + id + ".html #slider > *",
    type:'GET',
    data:{},
    dataType:'data',
    error:function(){},
    beforeSend:function(){},
    success:function(_data){
    $('.portfolioDisplay').slideDown('fast');
    $('#slider').html(_data);
     $("#slider").easySlider({
            continuous: true,
            nextText: "",
            prevText: ""
        });
    }
    });
});

Answer 2

我得到了它的工作。我无法使插件工作或第二组ajax代码（我肯定要么工作，但我无法正确），但你的第二个响应告诉我，我必须使用.ajaxComplete事件。这就是我提出的：

    $('.thumbnails div').click(function(){
        var id = $(this).attr("id");

$("#slider").load('portfolio/' + id + ".html #slider > *");
        $('#slider').ajaxComplete(function(){
        $("#slider").easySlider({
            continuous: true,
            nextText: "",
            prevText: "" 
        });

这很有效。非常感谢你的帮助

Answer 3

我无法获得你建议使用的插件或第二组代码（我确定只是因为我对ajax缺乏经验），但你让我意识到我必须在.load之后使用.ajaxComplete 。这就是我提出的：

    $('.thumbnails div').click(function(){
        var id = $(this).attr("id");

    $("#slider").load('portfolio/' + id + ".html #slider > *");
        $('#slider').ajaxComplete(function(){
        $("#slider").easySlider({
            continuous: true,
            nextText: "",
            prevText: "" 
        });

        });
    });

在调用两次函数之前，easy滑块不起作用

3 个答案: