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 = "<?php echo $_GET['user_id']; ?>"
   var postId = "<?php echo $_GET['post_id']; ?>"
   

   取而代之的是一个 PHP 文件，它生成 JSON 对象并由脚本标签加载：

   <script type="text/javascript" src="/get_json.php"></script>
   

   get_json.php 内部将是这个魔法：

   <?php
      $json['user_id'] = $_GET['user_id'];
      $json['post_id'] = $_GET['post_id'];
      echo json_encode($json);
   ?>
   

2. 不要重复代码。你所有的 f1 f2 都是不需要的。为什么不把它放到一个 Javascript 数组中，然后 .join('</td><td>') 并在末尾添加 <td> 和 </td>。

   var inputsArray = ['<input name="email"/>','<input name="fullname"/>'];
   
   var tdString = '<td>' + inputsArray.join('</td><td>') + '</td>';
   

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

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

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

   一遍又一遍地重复$('#'+par+' 是低效的。使用上下文参数来帮助你

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

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

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

   避免使用 parent parent parent parent parent parent，你明白了。当您对 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(
       ...