Question

我正在设计一个网站作为我学校虚拟企业课程的一部分，需要一些帮助。

Picture of Website Catalog for reference

好的，当用户点击网站顶部的其中一个缩略图图片时，动态添加“立即订购”按钮<button type="button" class="order-btn" id="order-btn">Order Now</button>。我希望分别将大图像和说明/按钮og-fullimg和og-details从用户单击订单按钮时向左滑出视口;它们也是动态添加的。这是我到目前为止所做的，但它似乎没有起作用。

JS

$(document).on('click', "#order-btn", function() {
    var order = $(this).parent(".og-details").attr("#order-btn");
    $("#og-fullimg").hide('slide', {direction: 'left'}, 1000);
    $("#og-details").hide('slide', {direction: 'left'}, 1000);
});

我已经包含了JQuery UI。任何帮助将不胜感激。我已经检查了Event Binding on Dynamically Created Elements。谢谢您的帮助。

答案

我忘了为.hide添加缓动。使og-fullimg和og-details滑出视口所需的代码以及滑入的订单表单order_form位于下方。

$(document).on('click', "#order-btn", function() {
    var order = $(this).parent(".og-details").attr("#order-btn");
    $("#og-fullimg").hide('slide', 'swing', '5000ms', {direction: 'left'}, 1000);
    $("#og-details").hide('slide', 'swing', '5000ms', {direction: 'left'}, 1000);
    $("#order_form").toggleClass('hidden');
});

花了一段时间，但我终于明白了。感谢那些提供帮助的人。

JQuery事件绑定多个动态元素

0 个答案: