Question

我试图在替换HTML元素后立即触发一个函数;然而，一切都没有发生。我已经在trigger（）方法上阅读了jQuery文档，但我仍然不确定如何使用它。我只是希望能够在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;
                        }
                    }

                }
            })

*更新*

我找到了一种更好的方法来同步解雇这两个功能，我已在下面回答了我自己的问题。

基本上，您可以使用jQuery.when（）API在触发自定义事件后立即运行函数，而不是单独使用trigger（）方法。

Answer 1

示例用法：

＆＃13;

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

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<button id="btn">Click Me</button>

＆＃13;

Answer 2

也可以使用参数

调用触发器

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

Answer 3

我找到了一种同步触发这两个事件的更好方法。您可以使用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;
                        }
                    }

             }

 });

在HTML元素的replaceWith（）上触发函数（）

3 个答案: