javascript - jquery 选择器与 # for id 一起使用时不起作用，但与 div[id ="theid"] 一起使用时不起作用

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 的元素，而后者为您提供 DOM 中具有给定 ID 的第一个元素。

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