Question

我已将div添加到<div id="opt1"> <form method="post" action="result-page.php"> <input type="hidden" id="occasion" name="occasion"> <div class="float-band"> <img src="images/common/close-btn.png" alt="Close" class="close" onClick="$(this).parent().parent().parent().slideUp(300);" /> <ul> <li> <input name="area" id="area" type="text" placeholder="Search Area, Location of your choice" autocomplete="off"> </li> <li> <label> <input type="text" name="CapacityList" placeholder="Guests Expected (approx.)" required> </label> </li> <li> <label> <select name="BudgetPerPerson"> <option selected>Budget (per person)</option> <option value="0-249">Less than Rs.250</option> <option value="250-499">Rs.250 < Rs.500</option> <option value="500-749">Rs.500 < Rs.750</option> <option value="750-999">Rs.750 < Rs.1000</option> <option value="1000-1499">Rs.1000 < Rs.1500</option> <option value="1500-1999">Rs.1500 < Rs.2000</option> <option value="2000-N">Rs.2000 & above</option> </select> </label> </li> <li> <input name="Search" type="submit" value="Search"> </li> </ul> </div> </form> </div>，这是完美的。但是，点击一个按钮，我将这个div的HTML复制到另一个div，一切正常，但第二个div中的自动完成功能根本不起作用。我的代码是：

DIV1：

$("#img2").on('click', function() {
    $('#occasion').val('BirthdayParty');
    $("#opt2").slideDown(300);
    $('#opt1,#opt3,#opt4,#opt5').hide();

    $('#opt2').html($('#opt1').html());

    $('#occasion').val('BirthdayParty');
    $("#opt1,#opt3,#opt4,#opt5,#opt6").fadeOut();
});

单击按钮时的HTML复制代码：

$(function)

用$('#area').autocomplete({ source: 'fetch.php/arealist', select: function(event, ui) { event.preventDefault(); console.log("z-index: " + $(".selector").zIndex()); $("#area").val(ui.item.label); //window.location.href = "detail.php?"+ui.item.value; }, focus: function(event, ui) { $("#area").val(ui.item.label); //this.value = ui.item.label; event.preventDefault(); // Prevent the default focus behavior. } });写的自动填充初始化按钮：

destroy/disable/setting autocomplete to null

我试过public class Test { private int a; private int b; public Test(int a , int b){ this.a = a; this.b = b; } /* instance method - sum() */ public int sum(){ return a+b; } public static void man(String[] args) { Test t1 = new Test(3,4); Test t2 = new Test(5,6); t1.sum(); t2.sum(); } }但到目前为止还没有任何工作。知道我在哪里错过了吗？

Answer 1

通过

解决问题

1) copied the HTML of div1 to a String
2) replaced the id of Autocomplete with a new one in the String
3) set the target div HTML to the new String
4) initialized the new Autocomplete 

k = $('#opt1').html();
k = k.replace(/area/g,'areab');
$('#opt2').html(k);
$('#areab').attr('name', 'area');
 $('#areab').autocomplete({
    source: 'fetch.php/arealist',
    select: function(event, ui) {
     event.preventDefault();
     $("#areab").val(ui.item.label);
     },
    focus: function(event, ui) {
     $("#areab").val(ui.item.label);
     event.preventDefault(); // Prevent the default focus behavior.
    }
});

特别感谢@Sanjeevi和@Pekka

jquery autocomplete无法在第二个div上使用相同的HTML

1 个答案: