jQuery .click() 和 .change() 冲突？

Question

我对 .click() 和 .change() 函数有问题。我不知道为什么，但我将它们单独放入 html 代码中，它们可以工作，但是当我将它们放在一起时，如下所示，它们就停止工作。问题是什么？ .change() 函数填充特定表行中的表单字段。 .click() 函数向表单内的表添加行或从表中删除行。

$(document).ready(function() {
    $('select[name="produkt[]"]').change(function() {
        var id = $('select[name="produkt[]"] option:selected').val();
        var par = $(this).parent().parent().attr('id');
        $.getJSON(
            '<?php echo $head['site_link'];?>index.php/faktura/pobierzProdukt/'+id,
            function(data){
                alert(par);
                $('#'+par+' input[name="pkwiu[]"]').val(data.product_pkwiu);
                $('#'+par+' input[name="netto[]"]').val(data.product_netto);
                $('#'+par+' input[name="vat[]"]').val(data.product_vat);
                $('#'+par+' input[name="brutto[]"]').val(data.product_brutto);
                $('#'+par+' input[name="jedn[]"]').val(data.product_jedn);
            },
            'json'
        );
    });

    $('#dodajWiersz').click(function() {
        var liczba = $('#produkty tr').length;
        var f1  = '<?php echo form_dropdown('produkt[]',$lista,'');?></td>';
        var f2  = '<?php echo form_input(array('name'=>'pkwiu[]','class'=>'short','readonly'=>'readonly'));?>';
        var f3  = '<?php echo form_input(array('name'=>'netto[]','class'=>'short','readonly'=>'readonly'));?>';
        var f4  = '<?php echo form_input(array('name'=>'vat[]','class'=>'mini','readonly'=>'readonly'));?>';
        var f5  = '<?php echo form_input(array('name'=>'brutto[]','class'=>'short','readonly'=>'readonly'));?>';
        var f6  = '<?php echo form_input(array('name'=>'jedn[]','class'=>'mini','readonly'=>'readonly'));?>';
        var f7  = '<?php echo form_input(array('name'=>'ilosc[]','class'=>'short'));?>';
        var f8  = '<?php echo form_input(array('name'=>'knetto[]','class'=>'short','readonly'=>'readonly'));?>';
        var f9  = '<?php echo form_input(array('name'=>'kvat[]','class'=>'short','readonly'=>'readonly'));?>';
        var f10 = '<?php echo form_input(array('name'=>'kbrutto[]','class'=>'short','readonly'=>'readonly'));?>';

        var row = '<tr id="wiersz-'+liczba+'"><td>'+liczba+'</td><td>'+f1+'</td><td>'+f2+'</td><td>'+f3+'</td><td>'+f4+'</td><td>'+f5+'</td><td>'+f6+'</td><td>'+f7+'</td><td>'+f8+'</td><td>'+f9+'</td><td>'+f10+'</td>';
        $('#produkty').find('tbody').append(row);
    });

    $('#usunWiersz').click(function() {
       $('#produkty').find('tbody tr:last').remove(); 
    });
});

Answer 1

看看这个：

<?php echo $head['site_link'];?>

我不知道“把它们放在一起”到底是什么意思。我想您的意思是，将函数打包到一个 .js 文件中。然而 JS-Files 不会解释 PHP。那么这可能是你的错误吗？

Answer 2

改进代码的技巧；

1. 不要混合使用 PHP 和 Javascript 代码。您自找麻烦，但我们不需要这么做。如果您需要 JavaScript 中可用的 PHP 信息，请使用 json_encode ——不要像这样逐字写入 Javascript 文件：

   var userId = ""
   var postId = ""
   

   而是使用一个生成 JSON 对象的 PHP 文件并通过脚本标记加载该对象：

   ;
   

   在 get_json.php 中将会有这样的魔力：

   <前><代码>

2. 不要重复代码。所有的 f1 f2 都是不需要的。为什么不直接将其放入 Javascript 数组中，然后 .join('') 并添加 和 到最后。

   var inputArray = ['<输入名称=“电子邮件”/>','<输入名称=“全名”/>'];
   
   var tdString = '' + inputArray.join('') + '';
   

   虽然我真的不明白为什么您需要 PHP 来帮助您创建表单和 HTML，特别是因为它甚至没有使用 PHP 应用程序中的任何特定信息。这完全没有意义。

3. 适当使用选择器并缓存。

   $('#'+par+' input[name="pkwiu[]"]').val(data.product_pkwiu);
   $('#'+par+' input[name="netto[]"]').val(data.product_netto);
   

   一遍又一遍地执行 $('#'+par+' 这样做效率很低。请使用 context 参数来帮助您

   var $id = $('#' + par);
   $('input[name="pkwiu[]"]', $id).val(data.product_pkwiu);
   

   请注意，使用了 $ 的第二个参数，它告诉 jQuery 在该上下文中选择输入（在本例中为元素的 id）。这允许我们缓存该 id，这样 jQuery 就不会在每次迭代中不断尝试找到它。

4. 不要将自己束缚在自己的 HTML 结构中。

   避免使用父父父父父父父父母，你明白了。即使对 HTML 结构进行简单的更改，也会引起麻烦

   var par = $(this).parent().parent().attr('id')`
   

   相反，最好使用 .closest(selector) （它在 DOM 中向上移动，并在到达匹配项时停止） .parents(selector) （它向上遍历 DOM 并匹配选择器的所有元素，直到根（通常是 body 标记）

   在没有看到 HTML 结构的情况下，很难判断 .parent().parent() 可以替换为什么，但让我们猜测它是表单元素：

   var par = $(this).closest('form').attr('id')`
   

好吧，现在有点长了。我还有很多其他的东西可以拆开，但现在就这些了！

Answer 3

对于单击和更改事件，我将使用绑定。
http://api.jquery.com/bind/

// Click    
$('#dodajWiersz').bind('click', function() {
    $('#produkty').find('tbody tr:last').remove(); 
});


// Change
$('select[name="produkt[]"]').bind('change', function() {
   var id = $('select[name="produkt[]"] option:selected').val();
   var par = $(this).parent().parent().attr('id');
   $.getJSON(
       ...