javascript - 当输入获得焦点时，光滑的 slider 方法 'slickPrev' 不会在引导模态内触发

Question

我在 bootstrap 模式中使用 slick slider 及其方法“slickPrev”和“slickNext”来手动滑动一些内容。一张幻灯片有一个表单并且一切正常，直到表单输入获得焦点然后我无法返回上一张幻灯片使用触发“slickPrev”方法的按钮。 该问题仅在移动浏览器上出现，目前为 chrome for android。

我试图在模态之外重现问题，但问题似乎只发生在模态内部，正如您在这个 jsfiddle 中看到的:https://jsfiddle.net/3x4bum5h/1/在哪里

$('body').on('click','.back-to-content',function(){
        $('.wl-items-swipe').slick('slickPrev');
        $('body').find('.modal-footer .btn-group').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button><button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>');

});

只会使输入失去焦点，否则它会在没有焦点输入时正常工作。

Answer 1

好的，我找到了一个解决方案。为了让它工作，我必须从页脚中删除触发幻灯片的按钮并将它们放在幻灯片中。 这是工作 fiddle :https://jsfiddle.net/yjex03gf/

<div class="wl-content">
     <p id="some-content">Lorem ipsum dolor sit amet.</p>
         <div class="btn-group">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>&nbsp;
              <button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>
        </div>
</div>

<div class="wl-form">
     <form id="w-items-form">
        <div class="form-group">
        <label for="email" style="font-weight:bold;font-size:14px">Email</label>
        <input type="text" class="form-control wl-email" placeholder="Email"/>
        </div>
        <div class="form-group">
        <label for="phone"  style="font-weight:bold;font-size:14px">Phone<span style="color:red">*</span></label>
        <input type="tel" class="form-control wl-phone" max="15" placeholder="Phone number"/>
        </div>
        <div class="form-group text-center">
            <button type="button" class="btn btn-wl-submit" style="font-size:14px;">Send <i class="fa fa-send"></i></button>
        </div>
    </form>
    <div class="btn-group">
         <button type="button" class="btn btn-default back-to-content" style="border-right: 2px solid #ececec;"><i class="fa fa-arrow-left"></i> Back</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
    </div>
</div>