Question

我有table我动态添加tr个元素。我有一个datepicker插件，它使用inputs中的.from_time和.til_time类分配给table。当我动态添加具有相同输入的tr元素时，该事件仅在第一个tr中起作用，而不在其他tr中起作用。

CODE：

HTML ：

<table>
                                <tr>
                                    <th></th>
                                    <th>ردیف</th>
                                    <th>نام شرکت یا سازمان</th>
                                    <th colspan="2">مدت خدمت</th>
                                    <th>آخرین سمت</th>
                                    <th>تعداد پرسنل تحت امر</th>
                                    <th>آخرین حقوق دریافتی</th>
                                    <th>علت ترک خدمت</th>
                                    <th>آدرس و تلفن محل خدمت</th>
                                </tr>
                                <tr>
                                    <td style="width: 20px">
                                        <img src="<?php echo get_template_directory_uri(); ?>/icons/plus.png" class="plus">
                                    </td>
                                    <td class="index">
                                        1
                                    </td>
                                    <td>
                                        <input type="text" id="company_name"  name="company_name" style="width: 100%" >
                                    </td>
                                    <td>
                                        <input type="text" placeholder="از تاریخ"    class="from_time" name="from_time" style="width: 100%">
                                    </td>
                                    <td>
                                        <input type="text" placeholder="تا تاریخ" class="til_time" name="til_time" style="width: 100%" >
                                    </td>
                                    <td>
                                        <input type="text"  id="hire_level" size="40" name="hire_level" style="width: 100%">
                                    </td>
                                    <td>
                                        <input type="text"  id="personnel"  size="40" name="personnel" style="width: 100%">
                                    </td>
                                    <td>
                                        <input type="text" name="salary"  style="width: 100%">
                                    </td>
                                    <td>
                                        <input type="text" id="out_reason" name="out_reason" style="width: 100%">
                                    </td>
                                    <td>
                                        <textarea  id="address" rows="2" cols="15" name="address"></textarea>
                                    </td>
                                </tr>
                            </table>

JAVASCRIPT：

$("#military_date, .from_time, .til_time, #job_date").pDatepicker();//function to be triggered for elements

我不知道它是否是一个事件，我想在动态添加类.pDatePicker()和.til_time

的每个输入上运行此.from_time

Answer 1

简短回答：动态添加的元素需要在它们上运行.pDatepicker()。

更长的答案：当您第一次运行$("#military_date, .from_time, .til_time, #job_date").pDatepicker();时，它会为当前 DOM中的所有匹配元素分配一个日期选择器。但是，当您动态更新DOM（即添加元素）时，他们不会在.pDatepicker()上运行它们。

如果您将新元素保留在变量中，则可以只运行new_element.pDatepicker()，但也可以采取懒惰的道路＆＃34;并重新运行$(".from_time, .til_time").pDatepicker();。

Answer 2

您必须使用.delegate或.on来生成动态元素

像波纹管一样

$(document).on(event,selector,function(){});

Answer 3

如果要在动态添加的元素上触发事件。那么你需要将事件绑定到那个元素或重新初始化相同的函数。

//Code to add new element here 
// { ------
//------ }

//reinitialize datepicker code
$("#military_date, .from_time, .til_time, #job_date").pDatepicker();

如果有帮助，别忘了给予回答。

Answer 4

这是jQuery和事件的常见情况，我认为你在动态创建的元素上使用.bind（）而不是为此目的使用.on（）或.delegate。

动态添加的元素不会在jquery中触发事件

4 个答案: