django和jquery单击将对象字段加载到div中

我需要解决这个问题：

我有一个django网站，它显示配方列表中的所有配方

这些配方中的每一个都是一个链接，单击该链接时应将该配方的字段加载到popupdiv中

到目前为止，我已经设置好了弹出div-现在我只需要弄清楚如何访问该按钮的配方字段

基本上，我想加载的内容是recipe.name recipe.author recipe.steps等 但我不知道怎么做

现在，我还使用ajax将一个表单加载到div中，因此我无论如何都不想干扰ajax调用（我也将发布这段代码）。对于这样的问题也使用ajax有意义吗

这是我的按钮点击功能

$(document).ready(function(){

    $(".button").click(function(){
        var content = $("#popupContact").load($('#recipe'));
    });
});

以下是我的页面的模板：

{% block content %}
{% autopaginate recipe_list 6 %}
    <div id="recipe_cont">
            {% for recipe in recipe_list %}
        <div class="recipe">
            <div class="button">//here is the button that is clicked to load recipe 
            <a href="{% url cookbook.views.userrecipe recipe.id %}" style="display: none;"></a>   
            <img src="{{ STATIC_URL }}chicknbraw.jpg" alt="" height="70" width="70" style="display:inline;" />
            <h4>{{ recipe.name }}</h4>
             </div>
            <h5>{{ recipe.author }}</h5>
            <h5>Prep Time: {{ recipe.prep_time }} minutes</h5>

            <h6><a href="/addrecipe/{{ recipe.id }}">Add Recipe</a>
                <a href="/removerecipe/{{ recipe.id }}">Remove Recipe</a></h6>
        </div>
    {% endfor %}
    </div>

    <div id="popupContact" class="popup">//load recipe information into this div
            <a id="popupContactClose" style="cursor:pointer;float:right;">x</a>
            <p id="contactArea">
            <h1 style="text-align:center">Create New Recipe</h1>
            {% include 'cookbook/create_form.html' %} //this is for the form that is loaded. Is there a way to include a different template? Maybe have multiple contactAreas and hide/show different ones depending on what is being loaded?
            </p>
    </div>
    <div id="backgroundPopup">
    </div>  
    <div id="col2-footer">
    {% paginate %}
    <p id="recipe_order_text"> order by: <a href="/userbook/ordered/name">abc</a>|<a href="/userbook/ordered/date">date</a> 
    </div>

{% endblock %}

非常感谢您提供的任何解决方案

katie

一种简单的方法（不推荐！）如下所示（在javascript中）

为了使这一点更好，将类分配给包含名称和作者的元素，然后您可以执行以下操作，而不是获取h4和h5

var name = $('.recipe-name', recipe);

同样，这也是一种黑客行为，应该以不同的方式进行…

一种黑客行为方式（不推荐！）如下所示（在javascript中）

为了使这一点更好，将类分配给包含名称和作者的元素，然后您可以执行以下操作，而不是获取h4和h5

var name = $('.recipe-name', recipe);

---

同样，这是一个很大的黑客行为，应该以不同的方式完成…

我最终创建了一个div，为每个加载的配方隐藏，然后使用.html（）将每个div放置在弹出窗口中

这最终工作得非常好-比用append或clone替换要好

---

感谢您的帮助@akhaku

我最终创建了一个div，为加载的每个配方隐藏，然后使用.html（）将每个div放置在弹出窗口中

这最终工作得非常好-比用append或clone替换要好

---

感谢您的帮助@akhaku

您是否在视图中创建表单？你有带模板的表单类吗？没有，我在视图中没有创建表单，也没有带模板的表单类（虽然我有创建新配方的功能），我希望我能以某种方式获取配方信息，因为我正在单击包含该配方的按钮。你在视图中创建表单吗？你有带模板的表单类吗？没有，我不在视图中创建表单，也没有带模板的表单类（尽管我有创建新配方的表单类）我希望我能以某种方式获取配方信息，因为我正在点击包含该配方的按钮。使用ajax有什么意义？表单不是已经通过ajax加载了吗？您不需要使用ajax这个特定的部分，因为它已经存在于DOM中，ajax用于将更多数据获取到DOM中或将数据发布到服务器。你是在问如何将这些信息输入表单吗？我想我的问题是，我的配方中也有注释和添加注释，因此我需要加载一个包含配方信息和所有注释的页面，然后才能添加注释。使用ajax有何意义？这是否更有意义？表单是否已经通过ajax加载？您不需要使用ajax这个特定的部分，因为它已经存在于DOM中，ajax用于将更多数据获取到DOM中或将数据发布到服务器。你是在问如何将这些信息输入表单吗？我想我的问题是，我的配方中也有注释和添加注释，因此我需要加载一个包含配方信息和所有注释的页面，然后才能添加注释

var name = $('.recipe-name', recipe);