javascript - JS : get value of element in ajax updated div

Question

我有一个页面，其中的 div 根据需要使用 Ajax 请求更新；这个 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 模板中，它们就可以正常工作；是否可以通过在 ajax 部分之前加载的主页面的 id 来处理输入？

编辑: 我尝试按照 Arathi Sreekumar 的建议将按钮按下脚本添加到更新 div 的 ajax unction，但它的行为与以前相同。除非您现在使用 slider 实际加载 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 层:项目信息窗口，其中包含 slider 控件和用于对项目执行某些操作的按钮，考虑 slider 值(自然还有项目 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 变化时更新的。出于某种原因，我无法直接使用 $('#slider_'.concat(item_id)).val(); 来处理 slider 。可能是我最初把我带到这里的问题。出于一般目的，我仍然想知道如何使用另一个 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。