滑块 ID 选择器不起作用

Question

我正在尝试选择一个滑块并从中检索值，但它抛出未定义。 这是滑块和包含滑块的可折叠组件的 html 代码：

<div id=collapsible'+element[0].id+' class="collapsible_contains_slider" slider_id='+element[0].id+' data-role="collapsible-set" data-theme="a" data-content-theme="c">
    <div data-role="collapsible" data-collapsed="false">
        <h3 id="title_collapsible">'+image.pname+'</h3>

        <center>
            <div id=image_cesta><img src=data:imajpeg;base64,'+image.pimage+' alt="image"></div>
            <div data-role="fieldcontain"></div>
        </center>

        <fieldset data-role="controlgroup">Cantidad: <input type="range" class="sliderscesta" id=slider_into_collapsible slider_value='+element[0].id+' name="slider" value='+element[1].value+' min="0" max="100" data-highlight="true">
        </fieldset>

        <div class="ui-grid-a">
            <div class="ui-block-a">
                <a id="delete_product_cesta_page" type="hidden" idproductecesta='+element[0].id+' data-role="button" data-theme="a"> Delete product</a>
            </div><div class="ui-block-b" id="reset_button_slider_cesta"></div>
        </div>
    </div>
</div>

<br><br>

这里是我的 Javascript 代码来选择滑块并检索值：

$('#cesta_page').on( 'slidestop', function( event ) {
    button_delete_or_update($('#slider_into_collapsible').attr('slider_value'),'update');
});

Answer 1

使用此代码：

$(document).on( 'slidestop', '[type="range"]',function( event ) {
    alert($(this).attr('slider_value'));
});

当然，它适用于具有 slider_value 属性的滑块。如果你想在只有属性 slider_value 的元素上使用它，请使用：

$(document).on( 'slidestop', '[type="range"]',function( event ) {
    if($(this).attr('slider_value').length > 0) {
         alert($(this).attr('slider_value'));
    }
});