การเพิ่มอินพุตแบบไดนามิก jquery จะไม่ทำงาน

ฉันได้ค้นหาไปทั่วและพบปัญหาที่คล้ายกัน แต่ก็ยังไม่สามารถแก้ไขปัญหาของฉันได้ ฉันยังคงดิ้นรนในการเรียนรู้ jquery และยังใหม่อยู่

อย่างไรก็ตาม ฉันกำลังพยายามเพิ่มอินพุตแบบไดนามิกลงในตาราง จนถึงตอนนี้ ฉันสามารถแสดงการเพิ่มแถวด้วยข้อความที่ป้อนใหม่ได้ ข้อความที่ป้อนควรมีฟังก์ชันเติมข้อความอัตโนมัติ แต่อินพุตที่เพิ่มแบบไดนามิกใหม่ไม่สามารถแสดงตัวเลือกเติมข้อความอัตโนมัติได้สำเร็จ

(เพื่อให้ชัดเจน ฉันใส่โค้ดลงใน JSFiddle นี่คือลิงก์:

http://jsfiddle.net/yodann/6t74T/637/ )

นี่คือรหัสของฉัน:

<?php
                            echo '<tr class="row_odd"><td class="ui-widget">';
                            echo form_input(array('id' => 'aff[]', 'name' => 'aff', 'value' => '',
                                    'class' => 'form-control auto_form', 'placeholder' => 'Masukkan nama tempat',
                                    'style' => 'width:100%'));
                            echo '</td><td><img src="'.getfrontendlink('images/del_button.png').
                                 '" width="24px" height="auto"></td></tr>';
?>

function addRow() {
    var count = $('#aff_table tr').length;
    var tx = count % 2 == 0 ? 'row_even' : 'row_odd';
    $('#aff_table tr:last').after('<tr class="' + tx + '">' +
        '<td class="ui-widget">'+
        '</td><td><img src="<?=getfrontendlink('images/del_button.png')?>" width="24px" height="auto"></td></tr>');

    var dat = $('#aff_table tr:last').children('td.ui-widget');
    $("input.auto_form:last").clone(true).appendTo(dat);
    $("input.auto_form:last").val("");           
}

<?php 
        if ($datas != '') {
            $i = 0;
            $php_array = array();
            foreach ($datas->result_array() as $row):
                $php_array[$i++] = ($row['pp_id'].'>>'.$row['pp_name'].', '.
                    (strlen($row['address']) > 25 ? substr($row['address'],0,25) : $row['address']).', '.
                    $row['city_name'].', '.$row['province_name']);
            endforeach;

            $js_array = json_encode($php_array);
            echo "var availableTags = ". $js_array . ";\n";
        }
?>

$( ".auto_form" ).autocomplete({
    source: availableTags
});

person yodann    schedule 03.04.2015    source แหล่งที่มา
comment
สวัสดี ดูเหมือนว่าคุณกำลังผสมโค้ด Javascript และ PHP เข้าด้วยกัน หากเป็นเช่นนั้น รหัสของคุณจะใช้งานไม่ได้ หากคุณไม่เต็มใจ คุณสามารถเพิ่มโค้ดที่แม่นยำกว่านี้ได้ เพื่อที่ฉันจะได้ช่วยคุณแก้ไขข้อบกพร่องได้   -  person That Guy    schedule 03.04.2015
comment
ทำไมเป็นเช่นนั้น? เพราะอินพุตเริ่มต้นทำงานได้ดี เฉพาะการเพิ่มในภายหลังระหว่างรันไทม์ซึ่งไม่สามารถแสดงตัวเลือกเติมข้อความอัตโนมัติได้   -  person yodann    schedule 03.04.2015
comment
สวัสดี Dubem ขอโทษที่จำผิด ฉันใส่โค้ดบน jsfiddle แล้ว ขอบคุณ. jsfiddle.net/yodann/6t74T/637   -  person yodann    schedule 03.04.2015
comment
ฉันคิดว่าคำถามของคุณได้รับคำตอบแล้วที่นี่ stackoverflow.com/questions/24656589/   -  person tsuensiu    schedule 03.04.2015


คำตอบ (1)


หากฉันเข้าใจปัญหาอย่างถูกต้อง: ในตอนท้ายของฟังก์ชัน addRow() คุณควรเริ่มต้นคุณสมบัติ .autocomplete อีกครั้ง หากคุณสร้างอินสแตนซ์การเติมอัตโนมัติหนึ่งครั้ง หลังจากเพิ่มฟิลด์อินพุตแบบไดนามิก jquery จะไม่เพิ่มคุณสมบัติที่จำเป็นโดยอัตโนมัติ

function addRow() {
    var count = $('#aff_table tr').length;
    var tx = count % 2 == 0 ? 'row_even' : 'row_odd';
    $('#aff_table tr:last').after('<tr class="' + tx + '">' +
        '<td class="ui-widget">'+
        '</td><td><img src="<?=getfrontendlink('images/del_button.png')?>" width="24px" height="auto"></td></tr>');

    var dat = $('#aff_table tr:last').children('td.ui-widget');
    $("input.auto_form:last").clone(true).appendTo(dat);
    $("input.auto_form:last").val("");  

    $(".auto_form").autocomplete({source: availableTags});      
}

พยายามเปลี่ยนโคลนเป็นการผนวกแบบง่าย: http://jsfiddle.net/rk27xbce/

person TesiaMedia    schedule 03.04.2015
comment
ไม่ มันใช้งานไม่ได้ ฉันเคยลองสิ่งนี้มาก่อนและไม่มีโชค - person yodann; 03.04.2015
comment
ฉันลองเล่นกับ jsfiddle ของคุณแล้ว แต่ปัญหาหลักอยู่ที่โคลน เพราะคุณได้รับคุณสมบัติเดียวกัน (ชื่อและรหัส) และ jquery ต้องการรหัสเฉพาะเพื่อให้ทำงานได้อย่างถูกต้อง - person TesiaMedia; 03.04.2015
comment
TesiaMedia ขอบคุณมากสำหรับความช่วยเหลือของคุณ ในที่สุดฉันก็แก้ไขปัญหาได้ สิ่งที่ควรทราบสองประการตรงนี้ คือการใส่ไว้ใน document.ready(function) และอย่างที่คุณบอก jquery จำเป็นต้องมี id ที่ไม่ซ้ำใคร :) - person yodann; 04.04.2015