jQuery選擇不工作，而是用DIV [ID = 「theid」]工作

這裏的情況是在HTMLjQuery選擇不工作，而是用DIV [ID = 「theid」]工作

<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(){});，這只是當在對話框的打開事件，但例如提交和驗證兩種方式。

來源

2013-02-13 Nikola

是$（「＃avatarWarper-0」）。click（function（）{}）;也不適合你？ – banana 2013-02-13 11:14:14

yes $（「＃avatarWarper-0」）。click（function（）{}）;不工作，但是當我使用$（「div [id ='avatarWarper - 」+ id +「']」）。click（function（）{}）沒問題。 – Nikola 2013-02-13 11:17:00

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

和

$("#avatarWarper-"+id)

都絕對有效的，並期待近平等的，但在一個點顯著不同：

第一個返回一組元素的ID爲'avatarWarper-"+id而後者給你的第一個 DOM中給定ID的元素。

所以我唯一能想到的錯誤就是你將這個ID分配給dom中的多個元素（這對於有效的HTML而言是不允許的，但不會拋出任何明顯的錯誤）。

來源

2013-02-13 11:17:42 Christoph

oo是的我沒有想過如果我只有一個id，但是當我創建對話框時，我克隆html並將其插入到模式中，該模式創建兩個id類型爲0的元素。 – Nikola 2013-02-13 11:22:48

如果有幫助，我創建了一個JS小提琴。這是破損的版本：http://jsfiddle.net/digitaleagle/BHHVG/這是固定的：http://jsfiddle.net/digitaleagle/BHHVG/3/ – digitaleagle 2013-02-13 14:11:39

hm，'/ 3'看起來相當破碎，一次取消彈出窗口後不會再出現。 – Christoph 2013-02-13 14:19:36

您正在創建一個以無效標記結尾的#editUser-*內容的副本。

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

當你應該直接使用它，除非你有很強的理由不要。

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

來源

2013-02-13 11:22:01 Alexander

jQuery的對話框總是創建HTML內容的副本，從而創建具有相同ID重複的元素。

使用此選擇器$("#avatarWarper-"+id)只會獲取當頁面加載時出現的元素，而不是由對話框動態創建的元素。

我剛剛與Fancybox有同樣的問題。我唯一的解決方案是使用類選擇器代替或者div[id="theid"]

來源

2013-02-13 11:22:12

jQuery選擇不工作，而是用DIV [ID = 「theid」]工作

回答

相關問題