jQuery .click () и .change () конфликтуют? - PullRequest
Новая
       39

jQuery .click () и .change () конфликтуют?

2 голосов
/ 17 мая 2011

У меня проблема с функциями .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(); 
    });
});

Ответы [ 3 ]

2 голосов
/ 17 мая 2011

Посмотрите на это: 

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

Я не знаю, что именно вы подразумеваете под "соединить их".Я полагаю, вы имеете в виду, упаковывая функции в один .js-файл.Однако JS-файлы не будут интерпретировать PHP.Так может быть в этом твоя ошибка?

1 голос
/ 17 мая 2011

Советы по улучшению вашего кода;

  1. Не смешивайте код PHP и Javascript. Вы просите о неприятностях, и это просто не нужно делать,Если вам нужна информация из PHP, доступная в вашем Javascript, тогда используйте 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+' снова и снова неэффективно.Используйте параметр context, чтобы помочь вам 

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

    Обратите внимание, что используется второй параметр $, который сообщает jQuery для выбора входных данных в этом контексте (в данном случае id элемента).Это позволяет нам кэшировать этот идентификатор, чтобы jQuery не пытался постоянно находить его на каждой итерации.

  4. Не привязывайте себя к своей собственной структуре HTML.

    Избегайте использования 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')`

Хорошо, теперь это становится немного длинным.Есть много других вещей, которые я могу выбрать, но пока это все!

0 голосов
/ 21 июля 2011

Для событий щелчка и изменения я бы использовал привязки. 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(
       ...
...