Question

我试图在点击时显示一个引用表单，该元素首先被预先添加然后需要通过ajax运行以获取元素的内容

HTML

<input type="button" class="used_result_icon used_result_nav_enquire" car="'.$full_listing_name.'" />

CSS

#used_car_quote {background:#fff; border:2px solid #bebebe; border-radius:5px; display:none; font-size:20px; left:500px; min-height:350px; position:fixed; width:640px; z-index:100;}

AJAX

$(document).on("click", ".used_result_nav_enquire", function() {
car = $(this).attr('car');
$('#used_car_quote').show();
$('#used_results_sort').prepend('<div id="used_car_quote"></div>');
$.ajax({  
    type : 'POST',
    url  : 'http://localhost/carprice/ajax/used-quote-results.php',
    data : 'car='+car,
    success : function(data) {
        $("#used_car_quote").html(data);
    }
}); 
});

非常奇怪，我点击按钮一次，没有任何反应，然后我再次点击，表格就会出现。

Answer 1

在AJAX Success $('#used_car_quote').show();

中使用此代码

$(document).unbind("click").bind('click', ".used_result_nav_enquire", function() {
car = $(this).attr('car');

$('#used_results_sort').prepend('<div id="used_car_quote"></div>');
$.ajax({  
    type : 'POST',
    url  : 'http://localhost/carprice/ajax/used-quote-results.php',
    data : 'car='+car,
    success : function(data) {
        $("#used_car_quote").html(data);
        $("#used_car_quote").show();
    }
}); 
});

Answer 2

我也想尝试它的样式，但这很奇怪，如果我点击它一次，然后它没有正确定位，关闭它然后再次点击，它是

$(document).on("click", ".used_result_nav_enquire", function() {
win_width = $(window).width();
form_width = $('#used_car_quote').width();
left = (win_width-form_width)/2;
win_height = $(window).height();
form_height = $('#used_car_quote').height();
top = (win_height-form_height)/2;
car = $(this).attr('car');
$('#used_results_sort').prepend('<div id="used_car_quote">test</div>');
$('#used_car_quote').css({'left':left,'top':top});
$.ajax({  
    type : 'POST',
    url  : 'http://localhost/carprice/ajax/used-quote-results.php',
    data : 'car='+car,
    success : function(data) {
        $("#used_car_quote").html(data);
        $('#used_car_quote').show();
    }
}); 
});

元素需要2次点击，直到显示

2 个答案: