Question

我有一个页面，根据需要使用Ajax请求更新了div;这个div包含一个带有动态名称的输入，我需要从中获取数据。需要此数据的按钮和脚本放在主页面上。当我尝试使用放在更新的div html中的脚本来获取数据时，它工作正常;但是在主页面上放置的相同代码不起作用。如何在Ajax更新的div中找到id的元素？

主页：

/* ajax updated div */
<span id="i_descr_{{i.id}}" class="tooltiptext"></span>
/* button */
<div class="trade_move arrow_r" item_id="{{i.id}}" partner_id="{{data.partner_id}}"></div>
<script>
$(".trade_move").click(function() {
            var item_id = $(this).attr("item_id");
            var partner_id = $(this).attr("partner_id");
            var quantity = 1;
            var sliderElem = document.getElementById("slider_".concat($(this).attr("item_id")));
            if (sliderElem) {
                quantity = sliderElem.value;
            }
}
</script>

Ajax模板，输入部分：

<input class="slider" type="range" item_id="{{description.id}}" id="slider_{{description.id}}" min="0" max="{{description.slider}}" value="{{description.slider}}" step="1">

如果我将按钮和脚本放入ajax模板中，它们就可以正常工作;是否有可能通过主页面的id来处理输入，在ajax部分之前加载？

编辑：我尝试将按钮按下脚本添加到ajax unction，根据Arathi Sreekumar的建议更新div，但它的行为与之前相同。它也不起作用，除非您现在实际使用滑块加载div，这意味着它来自ajax函数而不是其他地方。我可以解决语法错误吗？

$(".item_description").hover(function(){
                 var param = $(this).attr("d_id");
                 $.get('/sud/item_na/', {id: param}, function (data) {
                     $('#i_descr_'.concat(param)).html(data);

                     $(".trade_move").click(function() {
                        var item_id = $(this).attr("item_id");
                        var quantity = 1;
                        var sliderElem = document.getElementById("slider_".concat($(this).attr("item_id")));
                        if (sliderElem) {
                            quantity = sliderElem.value;
                        }
                        $.ajax({
                             ...
                        });
                    });
         });

edit2：我开始工作，不是我最初想要它的方式，但仍然如此。我没有详细介绍总体布局，但要明确说明： 1）第1层：带有空div和按钮的主页面 2）第2层：主页面上的空div用按下按钮生成的ajax html填充。这个html是一个项目列表，每个项目都有一个空的工具提示div，在悬停时触发另一个ajax查询并用项目信息填充它。 3）第3层：项目信息窗口，其中包含滑块控件和用于对项目执行某些操作的按钮，考虑滑块值（以及项目ID）。

我把按钮和附加的脚本放到最后一层3模板中。这是代码：

<div align="left">
        <input class="slider_value" id="slider_value_{{description.id}}" type="number" value="{{description.slider}}" disabled>
        <input class="slider" type="range" item_id="{{description.id}}" id="slider_{{description.id}}" min="0" max="{{description.slider}}" value="{{description.slider}}" step="1">
        <div class="trade_move_slider arrow_r" id="trade_move_slider_button_{{description.id}}" item_id="{{description.id}}" partner_id="{{description.partner_id}}" quantity="{{description.slider}}" style="width: 30px;height: 20px;display: inline-block;">
</div>

<script>
    $(document).ready(function() {
        $(".slider").change(function() {
            $("#slider_value_".concat($(this).attr("item_id"))).val($(this).val());
            $("#trade_move_slider_button_".concat($(this).attr("item_id"))).attr("quantity", $(this).val());
        });

        $(".trade_move_slider").click(function() {
            $('#output').html('<span class="dot"></span><span class="dot"></span><span class="dot"></span>');
            var csrftoken = getCookie('csrftoken');

            function csrfSafeMethod(method) {
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }
            $.ajaxSetup({
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });
            var item_id = $(this).attr("item_id");
            var partner_id = $(this).attr("partner_id");
            var quantity = $(this).attr("quantity");
            $.ajax({
                 type:"POST",
                 url:"/sud/trade_action/",
                 data: {
                        'partner': "container",
                        'id': partner_id,
                        'goods_id': item_id,
                        'csrftoken': csrftoken,
                        'quantity': quantity
                        },
                 success: function(data){
                         $('#output').html(data);
                 }
            });
        });

    });
</script>

注意滑块更改时按钮属性“数量”的更新方式。出于某种原因，我无法直接用$（'＃slider _'。concat（item_id））来解决滑块.val（）;我可能是最初把我带到这里的问题。出于一般目的，我仍然想知道如何在另一个ajax生成的DOM中使用脚本来解决一个ajax生成的DOM的元素（如果我正确地说这个）。

这是在悬停时更新项目信息的代码：

$(".item_description").hover(function(){
             if ($(this).attr("data") == "empty")
             {
                 $(this).attr("data", "loaded");
                 var param;
                 var partner_id = $(this).attr("partner_id");
                 param = $(this).attr("d_id");
                 $.get('/sud/item_na/', {id: param, list_type: 'char', 'partner_id': partner_id}, function (data) {
                     $('#i_descr_'.concat(param)).html(data);
                 });
             }
         });

Answer 1

您可以在输入元素中添加伪类js-slider：

<input class="slider js-slider" type="range" 
      item_id="{{description.id}}" 
      id="slider_{{description.id}}" 
      min="0" max="{{description.slider}}" 
      value="{{description.slider}}" step="1">

然后你这个类才能抓住你的元素。

$(".trade_move").click(function() {
    var item_id = $(this).attr("item_id");
    var partner_id = $(this).attr("partner_id");
    var quantity = 1;
    var sliderElem = $(".js-slider");
    if (sliderElem) {
        quantity = sliderElem.val();
    }
}

在上面的代码中，我认为很明显item_id和partner_id未被使用。所以你可以消除它们。此外，我看不到您使用quantity的位置。

JS：获取ajax更新div

1 个答案: