Question

这里是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(){});时，这只是在对话框的打开事件中，但是例如提交和验证都有效方法。

Answer 1

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

和

$("#avatarWarper-"+id)

都是绝对有效的，并且接近相等，但在一点上有显着差异：

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

所以我能想到的唯一错误就是你将这个ID分配给dom中的多个元素（在有效的HTML方面不允许这样做，但不会抛出任何明显的错误）。

Answer 2

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

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

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

$('#editUser-' + id).dialog({
  ...
});

Answer 3

jQuery Dialog 始终创建HTML内容的副本，从而创建具有相同Id的重复元素。

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

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

与#id一起使用jquery选择器时不起作用，但使用div [id =“theid”]

3 个答案: