JQuery 调用未从正确的 <div> 调用答案

【问题标题】：JQuery calls not calling the from the correct <div>JQuery 调用未从正确的 <div> 调用
【发布时间】：2017-03-26 00:05:07
【问题描述】：

我希望能够将不同的模板调用到不同的 div 中，但是当我单击按钮时，无论我按下纽约还是迈阿密按钮，它都只会调用 newyork.html。

<!DOCTYPE html>
<html>
<head>
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>
<script>

$(document).ready(function(){
 $("button").click(function(){
    $("#england").load("/hello");

});
$("buttonfra").click(function(){
    $("#france").load("/hello2");

});

});

</script>
</head>
<body>
<button>New York</button>
<button id="buttonfra">Miami</button>

<div id = "england">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the     United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div id="france">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<script>
var x = $("li").text();
console.log(x);

</script>
</body>
</html>

这是我正在运行的 python 脚本：

from flask import Flask, render_template, request
app = Flask(__name__)  

@app.route('/hello/')
@app.route('/hello/<name>')
def hello(name=None):
return render_template('newyork.html', name=name) 

def hello2(name=None):
return render_template('miami.html', name=name) 


@app.route('/')
def test():
return "test"

if __name__ == "__main__":     
app.run()

这是我的 newyork.html 模板：

<!doctype html> <title>New York City</title> {% if name %}   <h1>Hello {{ name }}!</h1> {% else %}   
<h1>New York City!</h1>
<p>New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean.</p>
<p>At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers. </p>
<p>Its iconic sites include skyscrapers such as the Empire State Building and sprawling Central Park. Broadway theater is staged in neon-lit Times Square. </p>{% endif %}

还有我的 miami.html 模板：

<!doctype html> <title>Miami</title> {% if name %}   <h1>Hello {{ name }}!</h1> {% else %}  
<h1>Miami!</h1>
<p>Miami is an international city at Florida's southeastern tip. Its Cuban influence is reflected in the cafes and cigar shops that line Calle Ocho in Little Havana.</p>
<p>On barrier islands across the turquoise waters of Biscayne Bay is Miami Beach, home to South Beach.</p>
<p>This glamorous neighborhood is famed for its colorful art deco buildings, white sand, surfside hotels and trendsetting nightclubs.</p>{% endif %}

任何帮助将不胜感激

【问题讨论】：

标签： jquery python html ajax flask

【解决方案1】：

看看jQuery's selector rules。使用$("button").click(...)，您可以为每个按钮元素绑定点击事件，但$("buttonfra").click(...) 绑定不起作用，因为您没有buttonfra 元素，它是一个id 属性：<button id="buttonfra">。

解决这个问题的最简单方法是在两个按钮上使用 id 属性：

<button id="buttonny">New York</button>
<button id="buttonfra">Miami</button>

以及它们的 jQuery 绑定：

$("#buttonny").click(function(){
    $("#england").load("/hello");    
});
$("#buttonfra").click(function(){
    $("#france").load("/hello2");    
});

【讨论】：