使用 html/jquery 在 div 元素中加载动态 url答案

【问题标题】：Loading dynamic url in div element using html/jquery使用 html/jquery 在 div 元素中加载动态 url
【发布时间】：2014-09-28 19:42:05
【问题描述】：

我在加载自定义 URL 时遇到了一些问题。基本思想是，用户将单击一系列导航链接，然后将在选项卡式引导程序 jumbotron 中动态加载适当的内容。一系列导航链接根据存储在后端的信息而有所不同（使用 django 的模板语言通过 html 模板中的 for 循环访问）。

我遇到的问题是，我必须在 for 循环中访问每个元素时调用函数，并根据内容的主键创建要加载的 url。我尝试为 onclick 事件模拟这个非常基本的示例：http://www.w3schools.com/jsref/event_onclick.asp

尝试加载的 url 不会评估我在 activate.js 中的函数，而是加载 selectCourseURL(var) 而不是函数的值。其次，我认为我使用的元素类型无法正确处理某些事情。在此处删除 href 属性（a href="#{{course.pk}}" ）与将加载 ID 从 #best_price 更改为匹配“#{{course.pk}}”一样没有任何作用。我希望在任何人单击要加载的文本时加载内容，默认情况下，加载到 best_price 选项卡（这是默认的活动选项卡）。非常感谢有关我在这里可能出错的任何信息！

这是我的代码：

get_my_book.html

{% extends 'accounts/profile.html' %}
{% block aaa %}
      {% for course in userprofile.courses.all%}
            <p class="minicoursenav"><a href="#{{course.pk}}" 
onclick=  ("#best_price" ).load("selectCourseURL('{{course.pk}}')")>
&nbsp;&nbsp;{{course.department_abbr}} {{ course.course_num }}</a>
            </p>
      {% endfor %}

<div class="container">        
    <div class="jumbotron">

  <div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a href="#best_price" data-toggle="tab">Best Price</a></li>
    <li><a href="#very_good" data-toggle="tab">Very Good</a></li>
    <li><a href="#good" data-toggle="tab">Good</a></li>
    <li><a href="#fine" data-toggle="tab">Fine</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
    <div class="tab-pane active" id="best_price">
    </div>
    <div class="tab-pane" id="very_good">
    </div>
    <div class="tab-pane" id="good">
    </div>
    <div class="tab-pane" id="fine">
    </div>
    </div>
  </div>
</div>
</div> 
{% endblock %}

激活.js

function selectCourseURL(p_key){
    var url = "/books/select_my_book/best_price/";
    return (url + p_key+ "/"); 
}

(note：accounts/profile.html 是父模板，它在文件末尾正确调用了activate.js。我通过放置一系列成功执行的activate.js中的命令。在{{ course.attribute }}中对后端的调用对该特定url有效。jquery已正确包含在父模板中。加载函数可以在activate中成功调用.js 文件）

【问题讨论】：

你在 onclick 属性中有语法错误：它必须被引用并且 '#best_price' jQuery 选择器需要用 $ 包裹，或者像这样的 jQuery：onclick= '$("#best_price") .load("selectCourseURL({{course.pk}})")'

标签： javascript jquery html django twitter-bootstrap

【解决方案1】：

jQuery 'load' 函数认为 'selectCourseURL(var)' 是 url 名称，而不是函数调用。

我建议像这样实现代码：

{% for course in serprofile.courses.all %}
    <p class="minicoursenav">
      <a class='course_link' data='{{ course.pk }}' href='#'>
          &nbsp;&nbsp;{{ course.department_abbr}} {{ course.course_num }}
      </a>
    </p>
{% endfor %}

激活.js：

$('.course_link').click(function(e) {
    e.preventDefault();
    var course_pk = $(this).attr('data');
    var url = selectCourseUrl(course_pk);
    $("#best_price").load(url);
    return false;
})

【讨论】：