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)

どちらも絶対的に有効で、ほぼ同じように見えますが、1つの点で大幅に異なります。

前者はIDを持つ要素のセットを返し'avatarWarper-"+id、後者は指定されたIDを持つDOMの最初の要素を返します。

したがって、私が考えることができる唯一のエラーは、この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 に答える