0

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

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

问题是它只适用于第一行，不适用于创建的每个字段。客户可以在将其发送到将创建包含此信息的 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
        });
    }

我还尝试使用委托、实时和 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);
    });
})
4

1 回答 1

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()); 
});
于 2013-08-07T21:13:19.807 回答