Jqueryダイアログが画像上で動作しない

Question

ワークフロー： JSONを角度範囲に渡し、ビュー内でng-repeatを使用して表示します。

次の関数を使用すると、特定のクラスの要素をクリックしてダイアログを表示できます。

$(function() { 
     $("#dialog").dialog({ 
      autoOpen: false, 
      show: { 
       effect: "blind", 
       duration: 1000 
      }, 
      hide: { 
       effect: "explode", 
       duration: 1000 
      } 
     }); 

     $(".opener").on("click", function() { 
      $("#dialog").dialog("open"); 
     }); 
    }); 

    $(function() { 
     $("#imagePopup").dialog({ 
      autoOpen: false, 
      show: { 
       effect: "blind", 
       duration: 1000 
      }, 
      hide: { 
       effect: "explode", 
       duration: 1000 
      } 
     }); 

特定のクラスのクリックでトリガされるようにします。私はOpener & Opener11ポップアップボタンをクリックしています。ここ

<tr ng-repeat="item in ItemList| filter:itemName "> 
      @*<td> 
       {{ item.CreatorID}} 
      </td>*@ 
      <td > 
       {{item.ItemName}} 
      </td> 
      <td > 
       {{item.CreatorName}} 
      </td> 
      <td > 
       {{item.Length}} 
      </td> 
      <td > 
       {{item.Width}} 
      </td> 
      <td > 
       {{item.Price}} 
      </td> 
      <td > 
       {{item.ItemDescription}} 
      </td> 
      <td > 
       {{item.Quantity}} 
      </td> 
      <td > 
       <div class="opener" style="text-align:center"> 
        <img ng-src="@Url.Content("{{item.ImagePath}}")" width="60" height="60" class="img-responsive img-circle" /> 
       </div> 
      </td> 
      <td > 
       <span class="glyphicon glyphicon-pencil"></span> 
      </td> 
      <td > 
       <span class="glyphicon glyphicon-trash"></span> 
      </td> 

     </tr> 

    </table> 
    <button class="opener">Opener</button> 
    <button class="opener">Opener11</button> 

    <div id="dialog" title="Item Image"> 
     <p>Sample text</p>    
    </div> 

はなく、同じクラス（NG-繰り返し内部を）持っている<div>のクリックで表示されます。

誰かが何か不足していると私に教えてもらえますか？代わりに

Answer 1

用途：

$(document).on("click", ".opener", function() { 
     $("#dialog").dialog("open"); 
}); 

ドキュメントreadyイベントがトリガされながら、DOMに存在しない要素にイベントを登録されています。

リファレンス質問： Event binding on dynamically created elements?