在html中单击后创建onClick内容

create onClick content after the click in the html

本文关键字：创建 onClick 内容 单击 html      更新时间：2023-09-26

我正在写一个django模板，我正在工作，有很多数据。我有所有的数据在django对象与我在模板。我想在按钮点击时创建表，所以我使用了

$(document).ready(function()
{   
   $(document).on("click", ".open-infoDialog", function ({{users}}) {});
});

我在上面的函数中创建表但是，在单击按钮之前，函数中已经创建了任何内容。是否有一种方法，我可以创建的代码在html后的按钮单击。

问题发生了，因为有大量的数据，需要很长时间才能看到页面

答案是否定的，不在模板内。模板变量是在服务器上填写的。当浏览器得到它的时候，所有的东西都被填满了。

如果你想在用户点击后才获得一些数据，你需要做一个特殊的视图来返回你想要的额外数据(json或任何你喜欢的)。然后在你的点击处理程序中，你可以对那个视图做一个ajax请求。

从数据的位置和传输时间来考虑这个问题。

1)您希望首先将一个页面加载到用户浏览器中，该页面不包含任何这些大数据。它只包含一个按钮供用户按下获取大数据。发生的方式是，浏览器连接到server/url, django查看urls.py并决定执行哪个视图。然后，视图使用模板生成显示按钮的html。返回到浏览器并显示。

这是请求的结束，你的第一个模板和第一个视图已经完成了它们的工作并退出。

2)然后，只有当用户按下按钮时，您才希望将数据加载到现有页面中。这是另一个请求。当按钮被按下时，click处理程序必须执行代码，使另一个连接到服务器，不同的url，不同的视图，不同的模板。因为返回的是不同的数据。然后在你的javascript中，你把这个新的html加载到你想要的现有页面的一部分…

这是经典的AJAX，它是两个不同的请求，但不是加载整个新页面，你只加载它的一部分。由于你还不清楚这是如何工作的，最简单的方法是编写两个完全独立的Django视图，每个视图都有自己的模板，自己的url等。然后你可以分别测试每一个。一种是返回带有按钮和javascript的页面，但没有数据。另一种方法只返回通常包含数据的页面部分。然后，一旦你让它工作，编写jQuery/javascript代码加载数据。

例如，在你的第一个模板中:

<script>
    $(document).ready(function()
    {   
        $(document).on("click", "#loadusers", function () {
            $( "#user_select" ).load( "/myapp/loadusers/" ); 
        });
    });
</script>
<form>
<input type="button" id="loadusers" value="Load User Choices">
<select id="user_select" name="user"></select>
</form>

在你的loadusers模板中:

{% foreach user in users %}
<option value="{{user.pk}}">{{user}}</option>
{% endfor %}

这将导致第一个视图呈现一个包含空选择的页面。然后单击该按钮，它将从第二个视图加载选项。

尝试以下代码:

$(document).ready(function()
{   
   var template = {{users}}; // Storing the template in a variable
   $(document).on("click", ".open-infoDialog", 
      function (l_template) {
         return function() {
           // This function will be called on click.
           // Do the stuff here. using l_template 
         };
      }(template)
});
模板将包含您的数据。这里，我们返回一个函数而不是值。返回的函数将在点击回调时调用。

可以在返回的函数中使用l_template

相关文章：