Question

我的页面创建了多行，每行包含三个文本输入。添加和删除字段的功能正常工作。

我需要在用户输入代码后搜索数据库并更改字段名称的值。

问题是它只适用于第一行，并不适用于创建的每个字段。客户可以在将其发送到将创建包含此信息的csv文件的php文件后添加所需的行数。

HTML

<div id="campos">
    <table border="0" cellpadding="2" cellspacing="4">
        <tr>
            <td>
                Excluir
            </td>
            <td align="center">
                Codigo no Bag:
            </td>
            <td>
                Nome Comum:
            </td>
            <td>
                Quantidade de registros:
            </td>
        </tr>
        <tr class="linhas">
            <td>
                <a href="#" class="removerCampo" title="Remover linha"><img src="../imagens/w_close.gif" width="11" height="11"></a>
            </td>
            <td>
                <input name="index_linha[]" type="hidden" value="1"> <input type="text" name="cod[]" id="cod" onblur="Busca_nome_acesso(this.value)">
            </td>
            <td>
                <input type="text" name="nome_acesso[]">
            </td>
            <td>
                <input name="qtd[]" type="text" size="5" maxlength="5">
            </td>
            <td></td>
        </tr>
        <tr>
            <td colspan="5" align="right">
                <label><a href="#" class="adicionarCampo" title="Adicionar item"><img src="../imagens/IconeMaisQuadrado.gif">Adicionar campo</a></label>
            </td>
        </tr>
        <tr>
            <td align="center" colspan="4">
                <span>&nbsp;</span> <input type="submit" id="btn-cadastrar" value="Cadastrar">
            </td>
        </tr>
    </table>
</div>

</div></form>

</div>

脚本jquery

$(function () {
    function removeCampo() {
        $(".removerCampo").unbind("click");
        $(".removerCampo").bind("click", function () {
            if ($("tr.linhas").length > 1) {
                $(this).parent().parent().remove();
            }
        });
    }


    $(".adicionarCampo").click(function () {
        var num_linhas = $("tr.linhas").length;
        if ($("tr.linhas").length < 10) {
            novoCampo = $("tr.linhas:first").clone();
            novoCampo.find("input").val("");
            novoCampo.insertAfter("tr.linhas:last");
            novoCampo.find('input:text:first').focus();
            novoCampo.find('input:hidden:first').val(num_linhas);
            removeCampo();
        }
    });

    //Function to search the database
    function Busca_nome_acesso(valor) {

        $.getJSON('busca_nome.php?search=', {
            valor: valor,
            ajax: 'true'
        }, function (j) {
            var resp = '';
            for (var i = 0; i < j.length; i++)
            resp += j[i].nome_comum_1;
            //return the answer here but dont know how
        });
    }

我也尝试过使用委托，live和on方法。

$("#tr.linhas").delegate("blur", $("#cod")function () {

    $.getJSON('busca_nome.php?search=', {
        valor: $(this).val(),
        ajax: 'true'
    }, function (j) {
        var resp = '';
        for (var i = 0; i < j.length; i++)
        resp += j[i].nome_comum_1;
        //Just to test, I do not know how to return the correct location
        alert(resp);
    });
})

Answer 1

我不确定你曾尝试过什么，但我在这里有一个工作小提琴：http://jsfiddle.net/9ULgR/你可以看看。基本上我所做的只是将输入上的id="cod"更改为class="cod"，因为您无法在文档中复制ID，它总会导致意外问题。之后我简单地使用jQuery的on事件在非动态父（#campos）上注册一个事件并委托给动态输入（input.cod），当你关注的东西不是它触发的输入时它会工作我的警告与文本框。

我还从标记中删除了onblur属性。我不确定这是否会导致任何问题，但如果您要使用jQuery（或Javascript）注册事件，请不要在HTML中执行此操作。

这是我写的事件处理程序：

$("#campos").on("blur", "input.cod", function() {
  alert("Make request for " + $(this).val()); 
});

JQuery - 自动完成和动态输入

1 个答案: