Prestashop multiple modals JQuery

Question

現在、Prestashopモジュールを使用していますが、AJAXメソッドを使用していますが、なぜコードが機能しないのかわかりません。

モーダルウィンドウのボタンをクリックしても何も起こりません。問題は3つのモーダルがあると私は思うが、この問題を解決する方法は知られていない。

これは（Smartyのと）HTMLコードです：

{foreach from=$array item=result} 
        {*$result|@var_dump*} 
        <tr> 
         <td><img src="{$result.image}" class="img-responsive center-block"/></td> 
         <td> 
          {$result.title_fr}<br/> 
          <small class="text-muted">{$result.content_fr}</small> 
          <br>{$result.brand.title_fr} 
         </td> 
         <td><code>{$result.code}</code></td> 
         <td> 
          <p>{$result.id}</p> 
          <a href="#" class="btn btn-default" id="buttonCatalog" data-toggle="modal" 
           data-target="#img_{$result.id}"> 
           <i class="icon-camera-retro"></i> 
          </a> 
          <a href="#" class="btn btn-default" id="buttonCatalog" data-toggle="modal" 
           data-target="#text_{$result.id}"> 
           <i class="icon-file-text"></i> 
          </a> 
          <a href="#" class="btn btn-default" id="buttonCatalog" data-toggle="modal" 
           data-target="#full_{$result.id}"> 
           <i class="icon-camera-retro" ></i> + <i class="icon-file-text"></i> 
          </a> 
          {*foreach from=$result.id item=id*} 
           {*$id|@var_dump*} 
           <!-- Modal window for the product images. --> 
           <div class="modal fade" id="img_{$result.id}" tabindex="-1" role="dialog" 
            aria-labelledby="ModalLabelImage" aria-hidden="true"> 
            <div class="modal-dialog" role="document"> 
             <div class="modal-content"> 
              <div class="modal-header"> 
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
                <span aria-hidden="true">&times;</span> 
               </button> 
               <h4 class="modal-title" id="ModalLabelImage">{$modalTitle}</h4> 
              </div> 
              <div class="modal-body"> 
               <p>{$modalImageExplain}</p> 
               <p id="alertMessage">{$modalExplain}</p> 
              </div> 
              <div class="modal-footer"> 
               <label for="again" id="notAgain"><input id="again" type="checkbox" /> {$modalAgain}</label> 
               <button type="button" class="btn btn-default" 
                 data-dismiss="modal">{$modalCancel} 
               </button><button class="btn btn-success" id="submitImage" data-action="{$urlAddImage}" 
                 data-idProduct={$result.id}>{$modalDefaultPrice}</button> 
              </div> 
             </div> 
            </div> 
           </div> 
           <!-- Modal window for the product description. --> 
           <div class="modal fade" id="text_{$result.id}" tabindex="-1" role="dialog" 
            aria-labelledby="ModalLabelImage" aria-hidden="true"> 
            <div class="modal-dialog" role="document"> 
             <div class="modal-content"> 
              <div class="modal-header"> 
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
                <span aria-hidden="true">&times;</span> 
               </button> 
               <h4 class="modal-title" id="ModalLabelImage">{$modalTitle}</h4> 
              </div> 
              <div class="modal-body"> 
               <p>{$modalTextExplain}</p> 
               <p id="alertMessage">{$modalExplain}</p> 
              </div> 
              <div class="modal-footer"> 
               <label for="again" id="notAgain"><input id="again" type="checkbox" /> {$modalAgain}</label> 
               <button type="button" class="btn btn-default" 
                 data-dismiss="modal">{$modalCancel} 
               </button><button class="btn btn-success" id="submitText" data-action="{$urlAddText}" 
                 data-idProduct={$result.id}>{$modalDefaultPrice}</button> 
              </div> 
             </div> 
            </div> 
           </div> 
           <!-- Modal window for the product description and image. --> 
           <div class="modal fade" id="full_{$result.id}" tabindex="-1" role="dialog" 
            aria-labelledby="ModalLabelImage" aria-hidden="true"> 
            <div class="modal-dialog" role="document"> 
             <div class="modal-content"> 
              <div class="modal-header"> 
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
                <span aria-hidden="true">&times;</span> 
               </button> 
               <h4 class="modal-title" id="ModalLabelImage">{$modalTitle}</h4> 
              </div> 
              <div class="modal-body"> 
               <p>{$modalFullExplain}</p> 
               <p id="alertMessage">{$modalExplain}</p> 
              </div> 
              <div class="modal-footer"> 
               <label for="again" id="notAgain"><input id="again" type="checkbox" /> {$modalAgain}</label> 
               <button type="button" class="btn btn-default" 
                 data-dismiss="modal">{$modalCancel} 
               </button><button class="btn btn-success" id="submitFull" data-action="{$urlAddFull}" 
                 data-idProduct={$result.id}>{$modalDefaultPrice}</button> 
              </div> 
             </div> 
            </div> 
           </div> 
          {*/foreach*} 
         </td> 
        </tr> 
       {/foreach} 

これは、JavaScriptのコードです：

$('#submitImage').on('click', function() { 
    $('#result').empty(); 

    var url = $(this).data('action'); 
    var idProduct = $(this).data('idproduct'); 

    var query = $.post(url, { 
     addImage: idProduct 
    }, function(data) { 
     $('#result').html(data); 
    }); 

    $('#image').modal('toggle'); 
}); 
$('#submitText').on('click', function() { 
    $('#result').empty(); 

    var url = $(this).data('action'); 
    var idProduct = $(this).data('idproduct'); 

    var query = $.post(url, { 
     addText: idProduct 
    }, function(data) { 
     $('#result').html(data); 
    }); 

    $('#text').modal('toggle'); 
}); 
$('#submitFull').on('click', function() { 
    $('#result').empty(); 

    var url = $(this).data('action'); 
    var idProduct = $(this).data('idproduct'); 

    var query = $.post(url, { 
     addFull: idProduct 
    }, function(data) { 
     $('#result').html(data); 
    }); 

    $('#full').modal('toggle'); 
}); 

誰か私を助けてくださいことができますか？

Answer 1

表示されているコードでは、要素型IDの結果が表示されず、JavaScriptで表示されているのは$('#result').html(data);です。 はまた、例えば、多分あなたは$配列は、複数の要素を持つことができるならば、あなたはjQueryのクラスではなく、IDにバインドする必要があり、ところで

$('#img_'+idProduct).modal('toggle'); 

を意味し、何$('#image')はありません。 idは一意でなければなりません。たとえば、次のクラスではなくIDでsubmitImageを使用し、その後、JavaScriptを変更：

$(".submitImage").each(function(index) { 
    $(this).on("click", function(){ 
      $('#result').empty(); 

      var url = $(this).data('action'); 
      var idProduct = $(this).data('idproduct'); 

      var query = $.post(url, { 
       addImage: idProduct 
      }, function(data) { 
      $('#result').html(data); 
     }); 

     $('#img_'+idProduct).modal('toggle'); 
    }); 
});