HTML元素的replaceWith（）上的觸發函數（）

我試圖在HTML元素被替換後立即觸發函數;然而，沒有任何事情發生。我已經閱讀了trigger（）方法的jQuery文檔，但我仍然不確定如何使用它。我只想在replaceWith（）方法之後立即同步觸發第二個函數。HTML元素的replaceWith（）上的觸發函數（）

這裏是我的代碼：

$('#dry-wet-table').on("custom", function() { 
       $(this).replaceWith('<table id="dry-wet-table"></table>'); 
      }) 

      $('#dry-wet-table').trigger("custom", function() { 
       $('#dry-wet-table').append("<tr><th>" + dryDietVal + "</th><th>" + wetDietVal + "</th></tr>"); 
       $('#dry-wet-table').append("<tr><td>0</td><td>" + cansPerDay + "</td></tr>"); 

       for (var a = cansPerDay - 0.25; a >= 0; a -= 0.25) { 

        if ($('#species option:selected').text() == "Cat") { 
         $('#dry-wet-table').append("<tr><td>" + ((parseFloat($('#calories').val()) - (parseFloat($('#diet-select-wet-cat option:selected').val()) * a))/parseFloat($('#diet-select-dry-cat option:selected').val())).toFixed(2) + "</td><td>" + a + "</td></tr>"); 
         if (a == Infinity) { 
          a = 0; 
         } 
        } 
        else if ($('#species option:selected').text() == "Dog") { 
         $('#dry-wet-table').append("<tr><td>" + ((parseFloat($('#calories').val()) - (parseFloat($('#diet-select-wet-dog option:selected').val()) * a))/parseFloat($('#diet-select-dry-dog option:selected').val())).toFixed(2) + "</td><td>" + a + "</td></tr>"); 
         if (a == Infinity) { 
          a = 0; 
         } 
        } 

       } 
      })

* UPDATE *

我已經找到了一個更好的辦法做到同步觸發這兩個功能，我已經回答了下面我自己的問題。

基本上，不是單獨使用trigger（）方法，而是在完成觸發自定義事件後，可以使用jQuery.when（）API來運行函數。

來源

2016-02-11 Sicypher

'$（ '＃乾溼表'）的觸發器（「自定義」）;'觸發器沒有函數調用：HTTP： //api.jquery.com/trigger/ – mplungjan

我已經閱讀過文檔，但是它沒有解釋如何很好地使用trigger（）函數。 – Sicypher

你爲什麼分裂功能？如果您想在觸發時執行某些操作，請將其餘代碼添加到自定義函數中。 – mplungjan

我發現了一個更好的方式來同步觸發這兩個事件。您可以使用jQuery.when（）API在您的自定義事件完成觸發後立即運行函數，而不是單獨使用trigger（）方法。

$('#dry-wet-table').on("custom", function() { 
       $(this).replaceWith('<table id="dry-wet-table"></table>'); 
      }) 

$('#dry-wet-table').trigger("custom"); 

$.when($(this).trigger('custom')).done(function() { 

     $('#dry-wet-table').append("<tr><th>" + dryDietVal + "</th><th>" + wetDietVal + "</th></tr>"); 
     $('#dry-wet-table').append("<tr><td>0</td><td>" + cansPerDay + "</td></tr>"); 

      for (var a = cansPerDay - 0.25; a >= 0; a -= 0.25) { 

        if ($('#species option:selected').text() == "Cat") { 
         $('#dry-wet-table').append("<tr><td>" + ((parseFloat($('#calories').val()) - (parseFloat($('#diet-select-wet-cat option:selected').val()) * a))/parseFloat($('#diet-select-dry-cat option:selected').val())).toFixed(2) + "</td><td>" + a + "</td></tr>"); 
         if (a == Infinity) { 
          a = 0; 
         } 
        } 
        else if ($('#species option:selected').text() == "Dog") { 
         $('#dry-wet-table').append("<tr><td>" + ((parseFloat($('#calories').val()) - (parseFloat($('#diet-select-wet-dog option:selected').val()) * a))/parseFloat($('#diet-select-dry-dog option:selected').val())).toFixed(2) + "</td><td>" + a + "</td></tr>"); 
         if (a == Infinity) { 
          a = 0; 
         } 
        } 

      } 

});

來源

2016-02-11 18:20:22 Sicypher

樣例用法：

$(function() { 
 
    $('#btn').on('custom', function(e) { 
 
    $('<p>Custom event handled.</p>').insertAfter(this); 
 
    }); 
 

 
    $('#btn').on('click', function(e) { 
 
    $(this).trigger('custom'); 
 
    }); 
 
});

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 
<button id="btn">Click Me</button>

來源

2016-02-11 18:09:56 gaetanoM

這似乎沒有回答這個問題。 – mplungjan

也叫帶參數的觸發

$('#dry-wet-table').trigger("custom",[5,10,20]);

來源

2016-02-11 18:38:09

HTML元素的replaceWith（）上的觸發函數（）

回答

相關問題