Question

我在加载自定义网址时遇到了一些问题。基本思想是用户将点击一系列导航链接，然后在选项卡式引导程序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}}”这里没有任何作用，因为将#best_price中的加载ID更改为匹配“＃{{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 %}

activate.js

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

（注意：accounts / profile.html是父模板，它正确调用文件末尾的activate.js.我已确认此网址是通过放置一系列成功执行的activate.js命令。{{course.attribute}}中对后端的调用对此特定URL有效.Jquery已正确包含在父模板中。可以在激活时成功调用load函数.js文件）

Answer 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 %}

activate.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;
})

使用html / jquery在div元素中加载动态URL

1 个答案: