在我的应用程序中,我希望显示另一种形式,在发布另一种形式后反映,然后另一种形式,但在一次ajax请求后我无法做到这一点。我的bindevent1函数不起作用。
<div class="brands">
<div class="brand-form">
<form id="brand-selection" action="index.php" method="post">
<input type="text" placeholder="type your brand name" name="brandList" list="brandList">
<datalist id="brandList">
<?php
foreach($results as $result){
$name = $result->brand_name;
echo "<option value=$name>";
echo $name;
}?>
</datalist>
<button id="brand-selection-button" class="btn-search" type="submit">Go!</button>
</form>
</div>
<div class="models">
<?php
if(isset($_POST['brandList'])){?>
<form id="model-selection" action="index.php" method="post">
<li><input type="text" name="modelList" list="modelList"></li>
<datalist id="modelList">
<?php
foreach($models as $model){
$name = $model->model_name;
$id = $model->model_id;
echo "<option value=$name>";
}?>
</datalist>
<button id="model-selection-button" class="btn-search" type="submit">Go!</button>
</form>
<?php }?>
</div>
<div id ="not-found" style="display:none;">
<form id="model-selection" action="home.php" method="post">
<input type="text" name="modelList" list="modelList">
</form>
</div>
</div>
<div class="models">
<script id="model_list_template" type="text/x-handlebars-template">
<form id="model-selection" action="index.php" method="post">
<input type="text" name="modelList" placeholder="model name" list="modelList">
<datalist id="modelList">
{{#each this}}
<option value={{modelName this}}></option>
{{/each}}
</datalist>
<button id="model-selection-button" class="btn-search" type="submit">Go!</button>
</form>
</script>
</div>
我的jquery脚本
var Brand = {
init: function(config){
this.config = config;
this.bindEvents1();
this.bindEvents2();
this.setupTemplate();
$('#brand-selection-button').remove();
$('.not-found').hide();
},
bindEvents2: function(){
this.config.selection1.on('input',this.fetchModels);
//this.config.selection.on('change',this.fetchModels);
},
bindEvents1: function(){
this.config.selection2.on('input',function(){
console.log('clicked');
});
},
setupTemplate: function(){
this.config.modelTemplate = Handlebars.compile(this.config.modelTemplate);
Handlebars.registerHelper('modelName', function(models){
modelName = models.model_name;
console.log(modelName);
return modelName
});
},
fetchModels: function(){
//console.log(Brand.config.form1.serialize());
var self = Brand;
$.ajax({
url: 'index.php',
type: 'POST',
data: self.config.form1.serialize(),
dataType: 'JSON',
success: function(results){
self.config.modelList.empty();
if(results[0]){
self.config.modelList.append(self.config.modelTemplate(results));
return this;
}else{
self.config.modelList.append(self.config.notFound);
//console.log(results[0]);
}
}
});
},
}
Brand.init({
selection1: $("input[name='brandList']"),
selection2: $("input[name='modelList']"),
form1: $('#brand-selection'),
form2: $('#model-selection'),
modelTemplate: $('#model_list_template').html(),
modelList: $('div.models'),
notFound: $('#not-found'),
list: $('#modelList')
});`