Question

我有jQuery脚本需要用JQuery noconflict实现，但它似乎打破了文档准备中的函数

jQuery的：

var $j = jQuery.noConflict();
$j(document).ready(function () {
    var rowNum = 0;

    function addRow(frm) {
        rowNum++;
        var row = '<p id="rowNum' + rowNum + '"><input type="text" name="qty[]" size="4" value=""> <input type="button" value="-" onclick="removeRow(' + rowNum + ');"></p>';
        $j('#itemRows').append(row);
    }

    function removeRow(rnum) {
        $j('#rowNum' + rnum).remove();
    }
});

HTML：

<input onclick="addRow(this.form);" type="button" value="Add Row" />

jsfiddle示例：http://jsfiddle.net/tu3yqf8y/

问题是如何在jquery中运行函数没有准备好冲突文件？

Answer 1

从onXYZ属性处理程序调用的函数必须是全局变量。你的函数不是全局变量，因为它们嵌套在ready回调中。

不是使用onXYZ属性，而是通过jQuery连接处理程序。在这种情况下，我可能会去委托处理程序：

var $j = jQuery.noConflict();
$j(document).ready(function () {
    var rowNum = 0;

    // Direct handler for adding (since you only have
    // one button and it's already there)
    $j(".add").on("click", function() {
        var row = '<p id="rowNum' + rowNum + '"><input type="text" name="qty[]" size="4" value=""> <input type="button" value="-" class="delete"></p>';
        $j('#itemRows').append(row);
    });

    // Delegated handler for removing (as you add these
    // dynamically)
    $j("#itemRows").on("click", ".delete", function() {
      $j(this).closest('p').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="itemRows"></div>
<input type="button" value="Add Row" class="add">

你可以仍然有行ID，但你不需要它们，所以我没有在上面使用它们。

添加jquery noconflict后，未定义函数addrow

jQuery的：

HTML：

1 个答案: