在替换的 dom 内容中使用函数

Question

好的，问题来了。我正在用 jquery 函数 replace.with 替换 html 内容。 HTML 的某些部分包含来自库 http://responsiveslides.com/ 的图像滑块，但 Jquery 使幻灯片功能在内容被替换后不会触发。在初始页面上它工作正常，然后在我替换内容后它停止工作。但是我确实通过在包含替换内容的页面上添加点击事件来实现它。

$(document.on('click', '.title', function(){
$("#slider3").responsiveSlides({
  auto: true,
  speed: 500, 
  });
  });

所以上面的代码工作正常，但我希望它在内容被替换时触发。不是当用户点击新页面上的按钮时。我也试过这个：

$(document).on('click','#title1', function(){
GoToFusion();
$("#slider3").responsiveSlides({
auto: true,
speed: 500,
});
});

而且我还尝试将以下代码放入替换旧 HTML 的 HTML 中，希望它会在页面加载后触发...

<script> $(function () {   
    $("#slider3").responsiveSlides({
    auto: true,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "large-btns"
  });
  });
  </script>

此外，我认为 HTML 或 CSS 没有任何问题，因为滑块可以很好地处理单击事件。我上学的最后期限快到了，我真的需要一些帮助……谢谢！！

p.s。抱歉我的英语不好，它不是我的母语。

编辑：

//function GoToFusion()
function GoToFusion() {
$("#Box1_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box1_Index").replaceWith(Box1_Fusion);
});
$("#Box2_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box2_Index").replaceWith(Box2_Fusion);
});
$("#Box3_Index, #Box3_Contact").animate({ 'margin-left': '100%' }, 1500,       function () {
    $("#Box3_Index, #Box3_Contact").replaceWith(Box3_Fusion);
});
$("#Box4_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box4_Index").replaceWith(Box4_Fusion);
});       
}

Answer 1

通常，如果不重新初始化插件，您将无法获得它 - 这是您正在使用 "on-click" 解决方法（有点）做的事情。我建议您在替换内容后触发点击事件。

所以如果你有

$(document.on('click', '.title', function(){
    $("#slider3").responsiveSlides({
      auto: true,
      speed: 500, 
    });
});
$("#Box1_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box1_Index").replaceWith(Box1_Fusion);
    $(document).trigger('click'); //trigger click on the document
});

但对我来说，这似乎效率很低（成本很高）。如果插件支持重新初始化（或自动更新的一种形式），我建议只替换插件使用的 DOM 中的内容。

Answer 2

$(document).on('click','#title1', function(){

$("#Box1_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box1_Index").replaceWith(Box1_Fusion);
});
$("#Box2_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box2_Index").replaceWith(Box2_Fusion);
});
$("#Box3_Index, #Box3_Contact").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box3_Index, #Box3_Contact").replaceWith(Box3_Fusion);
});
$("#Box4_Index").animate({ 'margin-left': '100%' }, 1500, function () {
    $("#Box4_Index").replaceWith(Box4_Fusion);
    $("#slider3").responsiveSlides({
    auto: true,
    pager: false,
    nav: true,
    speed: 500,
    namespace: "large-btns"
  });
});

成功了，也许不是最有效的方法，但对我有用。谢谢你帮我！

在替换的 dom 内容中使用函数

Using a function in replaced dom content

jquery

dom

slideshow

replacewith