Событие не сработает, когда я использую переменную для селектора - PullRequest
Новая
       8

Событие не сработает, когда я использую переменную для селектора

1 голос
/ 18 января 2020 
<html>
<body>

<h1>RECEIPT</h1>

    <datalist id="codes">
    <?php
    require_once('../../../mysqli_connect.php');
    $query = "SELECT DISTINCT itemcode FROM itemcost";
    $response = @mysqli_query($dbc,$query);

    while($row = mysqli_fetch_array($response)){
        echo    '<option value="' . $row['itemcode'] . '">';
                                                }       
    ?>
    </datalist>

<form action="receipt.php" method="POST">

    <table cellspacing="10" id="tbl">
    <thead>
        <td>ITEM CODE:</td>
        <td>ITEM NAME: </td>
        <td>QUANTITY OF ITEM:</td>
    </thead>
    <tbody>
    <tr>
        <td><input type="text" list="codes" name="Item_Code1" id="setter" size="5" /></td>
        <td><input type="text" name="Item_Name1" id="receiver" size="10"  /></td>
        <td><input type="text" name="Quantity_In1" size="5" /></td>
    </tr>
    </tbody>
    </table>
    <br>
    <br>
    <input type="number" name="rows" id="addrows" />
    <button type="button" id="btn">Add More</button>
    <input type="submit" name="submitted" value="Enter" />
    <input type="text" name="sendtotalrows" id="totalrows" style="visibility:hidden"/>


</form>

<script src="jquery.js"></script>

<script>
    $(function(){

    window.rowcompare = 2;  
    window.previousrownumber = 1;

    $('#setter').change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
                                        var selectedItemCode = $('#setter').val();
                                        $('#receiver').val(itemcodename[selectedItemCode]);});});

    $('#btn').on('click', function(){
        var rownumber = $('#addrows').val();
        rownumber = parseInt(rownumber) + window.previousrownumber;

        while( rownumber >= rowcompare){
        $('#tbl').find('tbody').append("<tr><td><input type=\"text\" list=\"codes\" name=\"Item_Code" + rowcompare +"\" id=\"setter" + rowcompare +"\" size=\"5\" /></td><td><input type=\"text\" name=\"Item_Name" + rowcompare +"\" id=\"receiver" + rowcompare +"\" size=\"10\"  /></td><td><input type=\"text\" name=\"Quantity_In" + rowcompare +"\" size=\"5\" /></td></tr>");

        $("#setter" + rowcompare).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
                                                    var selectedItemCode = $("#setter" + rowcompare).val();
                                                        $("#receiver" + rowcompare).val(itemcodename[selectedItemCode]);});});                      
        rowcompare++;
        }
        previousrownumber = rownumber;
        $('#totalrows').val(previousrownumber);
    });

    });
</script>

</body>
</html>

Моя проблема заключается в этой части кода, в то время как l oop, где я пытаюсь объединить переменную в Selector.

getitemcode. php просто возвращает пару ключ-значение 

$("#setter" + rowcompare).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
                                                    var selectedItemCode = $("#setter" + rowcompare).val();
                                                        $("#receiver" + rowcompare).val(itemcodename[selectedItemCode]);
});
});

Как видно из заголовка, мое событие не сработает. Я видел похожие вопросы и ниже приведены ответы, которые я пробовал: 

var IcodeID = 'setter' + toString(rowcompare)
var InameID = 'receiver' + toString(rowcompare)

$("#" + IcodeID ).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
                                                    var selectedItemCode = $("#" + IcodeID ).val();
                                                        $("#" + InameID ).val(itemcodename[selectedItemCode]);
});
});
parseInt(rowcompare);

$("#setter" + ${rowcompare}).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
                                                    var selectedItemCode = $("#setter" + ${rowcompare}).val();
                                                        $("#receiver" + ${rowcompare}).val(itemcodename[selectedItemCode]);
});
});                     

parseInt(rowcompare);
$("#setter" + rowcompare).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
                                                    var selectedItemCode = $("#setter" + rowcompare).val();
                                                        $("#receiver" + rowcompare).val(itemcodename[selectedItemCode]);
});
});

Но дело в том, когда я пытаюсь это сделать: 

$("#setter" + 2).change(function(){ $.getJSON('getitemcodename.php', function(itemcodename) {
                                                    var selectedItemCode = $("#setter" + 2).val();
                                                        $("#receiver" + 2).val(itemcodename[selectedItemCode]);
});
});

Оно работает. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 24 января 2020

Я получил решение по этой ссылке:

Передача переменной в: eq jquery селектор через некоторое время l oop

Вам нужно обернуть Jquery код, который использует инкрементную переменную внутри:

(функция (rowcompare) {Jquery Code}) (rowcompare);

Примерно так: 

(function(rowcompare){
            $(".code-input" + rowcompare).change(function(){ $.getJSON('getitemcodename.php', function(itemcodenamestocks) {
                                                         var selectedItemCode = $(".code-input" + rowcompare).val();                            
                                                         $(".code-output" + rowcompare).val(itemcodenamestocks[0][selectedItemCode]);
                                                         $(".stocks-output" + rowcompare).val(itemcodenamestocks[1][selectedItemCode]);
            });
            });
            })(rowcompare);

И это работает.

...