Question

最初，表格只有一个tr（标签/标题），然后点击add按钮点击，我创建新的tr，如下所示。以及add的所有其他结果点击将克隆最后tr。

<tr>          
   <script type="text/javascript">

       //fetch the value of select picker control and set into hidden field.
       AJS.$('#' + '${field_uid}-resourcetypepicker-new1').change(function () {
           AJS.$('#' + '${field_uid}-resourcetype-new1').val(AJS.$(this).attr('value'));
       });

       //fetch the value of select picker control and set into hidden field.
       AJS.$('#' + '${field_uid}-locationpicker-new1').change(function () {
           console.log(AJS.$(this).attr('value'));
           AJS.$('#' + '${field_uid}-location-new1').val(AJS.$(this).attr('value'));
       });  

    </script>  
<td>

     <input id="${field_uid}-resourcetype-new1" 
           name="${field_uid}" 
           type="hidden" 
           value="$r.getResourceType()" />

   <select id="${field_uid}-resourcetypepicker-new1">       
    <option value="adad"   #if ($r.getResourceType() == "adad") selected="selected"#end >adad</option>
    <option value="dada"   #if ($r.getResourceType() == "dada") selected="selected"#end >dada</option>
    <option value="aadd"   #if ($r.getResourceType() == "aadd") selected="selected"#end >aadd</option>
  </select>
  </td>

  <td>        
   <input id="${field_uid}-location-new1" 
           name="${field_uid}" 
           type="hidden" 
           value="$r.getLocation()" />

   <select id="${field_uid}-locationpicker-new1">
    <option value="Internal(Local)"   #if ($r.getLocation() == "Internal(Local)") selected="selected"#end >Internal(Local)</option>
    <option value="Contractor(Local)"   #if ($r.getLocation() == "Contractor(Local)") selected="selected"#end >Contractor(Local)</option>
    <option value="Contractor(Offshore)"   #if ($r.getLocation() == "Contractor(Offshore)") selected="selected"#end >Contractor(Offshore)</option>          
   </select>
  </td>

  <td>
    <input id="${field_uid}-rate-new1" 
           name="${field_uid}" 
           type="text" 
           value="$r.getRate()" />    <!-- $textutils.htmlEncode($r.getRate()) -->
  </td>

  <td>
    <input id="${field_uid}-effort-new1" 
           name="${field_uid}" 
           type="text" 
           value="$r.getEffort()" />
  </td>
</tr>

问题：在上面的内容中，指向特定控件ID '#' + '${field_uid}-resourcetypepicker-new1'的现有javascript意味着（呈现ID看起来像customfield-id-111-new1）。现在，问题是，每个克隆行将具有select/picker list控件的不同唯一ID。并且此javascript将仅指向第一行控件为AJS.$('customfield-id-111-new1')。但是对于下一行AJS.$('customfield-id-111-new2')，它应该是AJS.$('customfield-id-111-new3')。

那么，在jquery下面编写可以指向每个克隆控件而不是仅指向第一行控件的最佳方法是什么？通过tr参考控制或任何其他方式的任何方式。

 AJS.$('#' + '${field_uid}-resourcetypepicker-new1').change(function () {
           AJS.$('#' + '${field_uid}-resourcetype-  new1').val(AJS.$(this).attr('value'));
       });

另外，在克隆行中，它不包含此javascript，我需要在克隆后附加吗？

如果需要更多详细信息，请与我们联系。

注意：AJS.$等于$。它用于JIRA中的速度模板文件。

谢谢

Answer 1

根据更新的问题，请参阅以下代码

AJS.$('[id^="${field_uid}-resourcetypepicker-"]')

此选择器可用于获取ID为${field_uid}-resourcetypepicker的任何项目，因此您无需担心ID的最后一部分，即new1，new2等。

其次，您的更改事件将绑定到页面加载时出现的所有元素。但是如果你动态创建元素（克隆或其他），事件将无法工作。你应该使用

 AJS.$('[id^="${field_uid}-resourcetypepicker-"]').on('change', function () {
       ...
 });

这适用于页面上与选择器匹配的所有元素

如何在克隆行时管理表行关联的javascript（控件ID）

1 个答案: