jQuery函數間歇工作

Question

我很困在這里。

我正在使用實時搜索查找腳本（AJAX）通過輸入字段在數據庫中查找客戶。 選擇后，我單擊我選擇的客戶。 然后，我要為客戶填寫的表單中會填充數據庫中的那些詳細信息。 問題僅在單擊字段填充數據的某些時候。 這是完全斷斷續續的，如果我重復單擊同一客戶，最終他們將填充，則好像是突發工作，而好像是沒有任何模式。

感謝您的任何幫助:)

 // ########## LIVE SEARCH FUNCTION ########## // $(function(){ $(".search").keyup(function() { var searchid = $(this).val(); var dataString = 'search='+ searchid; if(searchid!='') { $.ajax({ type: "POST", url: "search.php", data: dataString, cache: false, success: function(html) { $("#result").html(html).show(); } }); }return false; }); jQuery(document).live("click", function(e) { var $clicked = $(e.target); if (! $clicked.hasClass("search")){ jQuery("#result").fadeOut(); } }); $('#searchid').click(function(){ jQuery("#result").fadeIn(); }); }); // ########## LIVE SEARCH FUNCTION ########## // // ########## DATA POPULATE FUNCTION ########## // NOT WORKING ALL THE TIME $( document ).ajaxComplete(function() { jQuery("#result").live("click",function(e){ var $clicked = $(e.target); $('#custid').val($clicked.find('.customerIdS').text()); $('#firstName').val($clicked.find('.firstNameS').text()); $('#lastName').val($clicked.find('.lastNameS').text()); $('#companyName').val($clicked.find('.companyNameS').text()); $('#streetAddressP').val($clicked.find('.streetAddressS').text()); $('#suburbP').val($clicked.find('.suburbS').text()); $('#stateP').val($clicked.find('.stateS').text()); $('#postcodeP').val($clicked.find('.postcodeS').text()); $('#phoneNumber').val($clicked.find('.phoneNumberS').text()); $('#emailAddress').val($clicked.find('.emailAddressS').text()); }); }); // ########## DATA POPULATE FUNCTION ########## // NOT WORKING ALL THE TIME 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div class="content" style="float:right;"> <input id="searchid" class="search" type="text" placeholder="Search for customer using first name, last name or company name."></input> <br></br> <div id="result" style="display: none;"> <div class="show" align="left"> <div class="selection"> <span class="customerIdS"> 3628 </span> <span class="firstNameS"> David </span> <span class="lastNameS"> Dodrel </span> - <span class="companyNameS"></span> , <span class="streetAddressS"> 101 Woodward Place </span> , <span class="suburbS"> Suburb </span> <span class="stateS"> State </span> <span class="postcodeS"> Postcode </span> <span class="phoneNumberS"></span> <span class="emailAddressS"></span> </div> </div> </div> <div id="customerDetails" class="row"> <div class="col-sm-6"> <label for="firstName">First Name</label> <input type="text" name="firstName" id="firstName"> <label for="lastName">Last Name</label> <input type="text" name="lastName" id="lastName"> <label for="companyName">Company Name</label> <input type="text" name="companyName" id="companyName"> </div> <div class="col-sm-6"> <label for="phoneNumber">Phone Number</label> <input type="text" name="phoneNumber" id="phoneNumber"> <label for="emailAddress">Email Address</label> <input type="text" name="emailAddress" id="emailAddress"> </div> </div> 

Answer 1

嘗試使用下面的代碼，而不是您的代碼。 另外，請檢查解釋我認為您的代碼有問題的注釋。

jQuery(function(){
    jQuery(".search").on("keyup", function() {
        var searchId, dataString;
        searchId = jQuery(this).val();
        dataString = "search=" + searchId;
        if (searchId) {
            jQuery.ajax({
                type: "POST",
                url: "search.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    jQuery("#result").html(html).show();
                }
            });
        }
    });
    jQuery(document).on("click", function(e){
        //No need to use "live" here since this whole block of code will be executed once the DOM is ready
        var $clicked = jQuery(e.target);
        if (!$clicked.hasClass("search")) {
            jQuery("#result").fadeOut(); 
        }
    });
    jQuery("#searchid").on("click", function(){
        jQuery("#result").fadeIn();
    });
    //This is only attached once since your "#results" div is there from the beginning and you only change its content, you don't remove and attach it again.
    jQuery("#result").on("click", ".selection", function(e){
        //You were getting jQuery(e.target) but i assume it wasn't what you wanted since you were getting the element that was clicked inside "#result" and not "#result" itself (that is where you find your content and then assign values based on it)
        var $clicked = jQuery(this);
        jQuery('#custid').val($clicked.find('.customerIdS').text().trim());
        jQuery('#firstName').val($clicked.find('.firstNameS').text().trim());
        jQuery('#lastName').val($clicked.find('.lastNameS').text().trim());
        jQuery('#companyName').val($clicked.find('.companyNameS').text().trim());
        jQuery('#streetAddressP').val($clicked.find('.streetAddressS').text().trim());
        jQuery('#suburbP').val($clicked.find('.suburbS').text().trim());
        jQuery('#stateP').val($clicked.find('.stateS').text().trim());
        jQuery('#postcodeP').val($clicked.find('.postcodeS').text().trim());
        jQuery('#phoneNumber').val($clicked.find('.phoneNumberS').text().trim());
        jQuery('#emailAddress').val($clicked.find('.emailAddressS').text().trim());
    });    

});