0

这是html的情况

<div id="editUser-0" style="display: none;">
    <form action="/admin/uactions.php" method="post" enctype="multipart/form-data" class="form-horizontal" id="userEditorForm-0">
    <input type="hidden" name="id" id="id" value="0" />
    <input type="hidden" name="action" id="action" value="edituser" />
    <div class="control-group">
        <label class="control-label" for="name">Име</label>
        <div class="controls">
            <input type="text"  id="name-0" name="name" class="validate[required]" placeholder="Име" value="">
        </div>
    </div>
    <div class="control-group" >
        <label class="control-label" for="email-0">Имейл</label>
        <div class="controls">
            <input type="text" id="email-0" class="validate[required,custom[email]]" name="email" placeholder="Имейл" value="">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="type-0" >Тип</label>
        <div class="controls">
            <select name="type" id="type-0">
                <option value="1" >Администратор</option>
                <option value="100" >Потребител</option>
            </select>
        </div>
    </div>
    <div class="control-group hidden" id="avatarWarper-0">
        <label class="control-label" for="avatar-0">Снимка</label>
        <div class="controls">
            <input type="file" name="avatar" id="avatar-0" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="typeinvestor-0">Тип инвеститор</label>
        <div class="controls">
            <select name="typeinvestor" id="typeinvestor-0" >
                <option value="0">-</option>
                <option value="1">Investor type 1</option>
                <option value="2">Investor type 2</option>
                <option value="3">Investor type 3</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="phone-0" >Телефон</label>
        <div class="controls">
            <input type="text" id="phone-0" name="phone" placeholder="Телефон" class="validate[required]" value="">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="country-0">Държава</label>
        <div class="controls">
            <select name="country" id="country-0" class="validate[required]">
                <option value="ZW">Zimbabwe</option>
            </select>
        </div>
    </div>
    </form>
</div>

这是javascript

function editUser(id) {
  title = "Change user";
  if (id === 0)
    title = 'New user';

  $('<div>' + $('#editUser-' + id).html() + '</div>').dialog({
    modal: true,
    width: 450,
    title: title,
    buttons: {
      'Save': function() {

        $('#userEditorForm-'+id).validationEngine('attach',{promptPosition : "inline", scroll: true});

        if($('#userEditorForm-'+id).validationEngine('validate')){
          $('#userEditorForm-'+id).submit();
        }

      },
      'Cancel': function() {
        $(this).dialog('close');
        return false;
      }
    },
    open: function(event, ui) {
       $('.ui-dialog :button').blur();
      $("select[id='type-"+id+"']").click(function(){
        if($(this).val()==1){
          $("div[id='avatarWarper-"+id+"']").removeClass('hidden');
        }else{
           $("div[id='avatarWarper-"+id+"']").addClass('hidden');
        }
      });
     $('#type-'+id).click();
    },
    close: function(event, ui) {

      $(this).dialog('destroy');
      $(this).remove();

    }
  });
}

问题是，当我使用$("div[id='avatarWarper-"+id+"']").click(function(){})它时它可以工作，但是当我尝试使用 $("#avatarWarper-"+id).click(function(){});时，这只是在对话框的打开事件中，但例如提交和验证是双向的。

4

3 回答 3

4 
$("div[id='avatarWarper-"+id+"']")

和

$("#avatarWarper-"+id)

两者都是绝对有效的，看起来几乎相等，但在一点上有显着差异：

第一个返回一组具有 ID 的元素，'avatarWarper-"+id而后者为您提供 DOM 中具有给定 ID 的第一个元素。

因此，我能想到的唯一错误是您将此 ID 分配给了 dom 中的多个元素（这在有效 HTML 方面是不允许的，但不会引发任何明显的错误）。

于 2013-02-13T11:17:42.577 回答
1

#editUser-*您正在创建以无效标记结尾的内容的副本。

$('<div>' + $('#editUser-' + id).html() + '</div>').dialog({
  ...
});

当您应该直接使用它时，除非您有充分的理由不这样做。

$('#editUser-' + id).dialog({
  ...
});
于 2013-02-13T11:22:01.003 回答
1

jQuery Dialog总是会创建 HTML 内容的副本，因此会创建具有相同 Id 的重复元素。

使用此选择器$("#avatarWarper-"+id)将仅获取页面加载时存在的元素，而不是对话框动态创建的元素。

我对 Fancybox 也有同样的问题。我唯一的解决方案是使用类选择器，或者div[id="theid"]

于 2013-02-13T11:22:12.003 回答