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

改进代码的提示;

不要混用PHP和Javascript代码。您要求麻烦，而且不需要这样做。如果您需要在Javascript中使用PHP提供的信息，请使用json_encode - 不要像这样写入Javascript文件：
```
var userId = "<?php echo $_GET['user_id']; ?>"
var postId = "<?php echo $_GET['post_id']; ?>"
```
而是有一个生成JSON对象的PHP文件，并由脚本标记加载：
```
<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);
?>
```
不要重复代码。所有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应用程序中特定的任何信息。这完全没有意义。
适当使用选择器并缓存。
```
$('#'+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不会经常尝试通过每次迭代找到它。
不要束缚自己的HTML结构。

避免使用父父母父母父母，你明白了。当您对HTML结构进行简单的更改时，这会引起麻烦
```
var par = $(this).parent().parent().attr('id')`
```
相反，最好使用.closest(selector)（它在DOM上移动并在到达匹配时停止）.parents(selector)（向上移动DOM并匹配选择器的所有元素，直到root，通常是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(
       ...

jQuery .click（）和.change（）冲突？

3 个答案: