第二次单击时刷新数据 Ajax？

Question

我使用 Ajax 将数据发送到 Flask 表单 JavaScript，单击地图上的按钮后创建了一个标记，来自 Ajax 的数据被添加到标记弹出窗口中.我创建了一个 polyline 表单 coordinates 并在点击弹出折线后显示在地图上。问题是当我点击的次数比一次多时，一切正常，因为数据不同，但 polyline 有问题。当我添加两个标记并单击第一个标记时，第二个标记显示 polyline。我有两个想法如何去做，但我不知道是否可以那样做。

第二次点击后刷新页面并再次添加标记
以某种方式将 polyline 添加到特定标记

JavaScript中的代码：

$("#search-button_event").click(function () { // make ajax request on btn click
        $.ajax({
            type: "POST",
            url: "/mapaa", // url to the function
            data: {
                nameevent: $("#name_of_event").val(), // value of the form
            },
            success: function (response) {
                 nazwa = (response['name']);
                 droga = (response['route']);
                 

                 droga_without = droga.replaceAll("{","")
                 droga_with2 = droga_without.replaceAll("}","")
                 var string = droga_with2.split(',');

                

                let marker_event = L.marker(array[0]).bindPopup()
                marker_event._popup.setContent(
                                                                '<form method="POST" action="/mapaa"'+
                                                                '<p>Nazwa: '+nazwa+'</p>'+
                                                                '<input name="nameOfEvent" type="hidden" value="' + nazwa + '" id="nameOF">' +
                                                                
                                                                '<button type="submit" id="form-submit" name="form-submit"  class="btn btn-warning btn-block">Dołącz do wydarzenia</button>'+
                                                                '</form>')

                marker_event.addTo(mymap)

                polyline_event = L.polyline(array,{color: 'red'})
                marker_event.on('click',function(){
                    polyline_event.addTo(mymap)
                })
                marker_event.getPopup().on('remove', function() {
                    polyline_event.remove()
                })

                mymap.setView(array[0],14)

            },
        });
    });

Answer 1

问题是 variable scope。所有 click 使用相同的变量 polyline 所以他们都在这个变量中使用相同的值。

所以您遇到了与此代码类似的问题 - 所有弹出窗口都显示相同 "Popup 3"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>WRONG</h1>

<div id="popup_1">Click to show Popup 1</div></br>
<div id="popup_2">Click to show Popup 2</div></br>
<div id="popup_3">Click to show Popup 3</div></br>

<script language="javascript">

polyline = "Popup 1";

$('#popup_1').on('click', function(){
    alert(polyline);
});

polyline = "Popup 2";

$('#popup_2').on('click', function(){
    alert(polyline);
});

polyline = "Popup 3";

$('#popup_3').on('click', function(){
    alert(polyline);
});

</script>

如果您将代码放入函数中并将 polyline 作为值发送，那么它将分配给不同的局部变量，它们将正常工作。是 closure.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>GOOD</h1>

<div id="popup_1">Click to show Popup 1</div></br>
<div id="popup_2">Click to show Popup 2</div></br>
<div id="popup_3">Click to show Popup 3</div></br>

<script language="javascript">

function assign(item, line) {
    $(item).on('click', function(){
        alert(line);
    });
}    

polyline = "Popup 1";

assign('#popup_1', polyline);

polyline = "Popup 2";

assign('#popup_2', polyline);

polyline = "Popup 3";

assign('#popup_3', polyline);

</script>

编辑：

有点不同的方式。它使用函数获取 polyline 和 returns 具有此值的新函数。

function assign(line) {
    return function(){
        alert(line);
    }
}    

polyline = "Popup 1";

$('#popup_1').on('click', assign(polyline));

polyline = "Popup 2";

$('#popup_2').on('click', assign(polyline));

polyline = "Popup 3";

$('#popup_3').on('click', assign(polyline));

编辑：

另一个带匿名功能的版本

polyline = "Popup 1";

(function() {
    let val = polyline;
    $('#popup_1').on('click', function(){
        alert(val);
    });
})()    

polyline = "Popup 2";

(function() {
    let val = polyline;
    $('#popup_2').on('click', function(){
        alert(val);
    });
})()    

polyline = "Popup 3";

(function() {
    let val = polyline;
    $('#popup_3').on('click', function(){
        alert(val);
    });
})()

编辑：

它似乎在没有 function 的情况下也能工作，但只有在块 {..} 和 let 的情况下（不能是 var）。我只在最新的 Firefox 中测试过，不知道它是否适用于非常旧的浏览器。

polyline = "Popup 1";

{
    let val = polyline;  // it has to use `let`, not `var`
    $('#popup_1').on('click', function(){
        alert(val);
    });
}

polyline = "Popup 2";

{
    let val = polyline;  // it has to use `let`, not `var`
    $('#popup_2').on('click', function(){
        alert(val);
    });
}

polyline = "Popup 3";

{
    let val = polyline;  // it has to use `let`, not `var`
    $('#popup_3').on('click', function(){
        alert(val);
    });
}

或更短

{
    let polyline = "Popup 1";  // it has to use `let`, not `var`
    $('#popup_1').on('click', function(){
        alert(polyline);
    });
}

{
    let polyline = "Popup 2";  // it has to use `let`, not `var`
    $('#popup_2').on('click', function(){
        alert(polyline);
    });
}

{
    let polyline = "Popup 3";  // it has to use `let`, not `var`
    $('#popup_3').on('click', function(){
        alert(polyline);
    });
}

用于测试的完整工作代码。

from flask import Flask, request, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string('''
<a href="/wrong">WRONG</a><br>
<a href="/good1">GOOD 1</a><br>
<a href="/good2">GOOD 2</a><br>
<a href="/good3">GOOD 3</a><br>
<a href="/good4">GOOD 4</a><br>
<a href="/good5">GOOD 5</a><br>
''')

@app.route('/good1')
def good1():
    return render_template_string('''
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>GOOD 1</h1>

<div id="popup_1">Click to show Popup 1</div></br>
<div id="popup_2">Click to show Popup 2</div></br>
<div id="popup_3">Click to show Popup 3</div></br>

<script language="javascript">

function assign(item, line) {
    $(item).on('click', function(){
        alert(line);
    });
}    

polyline = "Popup 1";

assign('#popup_1', polyline);

polyline = "Popup 2";

assign('#popup_2', polyline);

polyline = "Popup 3";

assign('#popup_3', polyline);

</script>
''')

@app.route('/good2')
def good2():
    return render_template_string('''
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>GOOD 2</h1>

<div id="popup_1">Click to show Popup 1</div></br>
<div id="popup_2">Click to show Popup 2</div></br>
<div id="popup_3">Click to show Popup 3</div></br>

<script language="javascript">

function assign(line) {
    return function(){
        alert(line);
    }
}    

polyline = "Popup 1";

$('#popup_1').on('click', assign(polyline));

polyline = "Popup 2";

$('#popup_2').on('click', assign(polyline));

polyline = "Popup 3";

$('#popup_3').on('click', assign(polyline));

</script>
''')

@app.route('/good3')
def good3():
    return render_template_string('''
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>GOOD 3</h1>

<div id="popup_1">Click to show Popup 1</div></br>
<div id="popup_2">Click to show Popup 2</div></br>
<div id="popup_3">Click to show Popup 3</div></br>

<script language="javascript">

polyline = "Popup 1";

(function() {
    let val = polyline;
    $('#popup_1').on('click', function(){
        alert(val);
    });
})()    

polyline = "Popup 2";

(function() {
    let val = polyline;
    $('#popup_2').on('click', function(){
        alert(val);
    });
})()    

polyline = "Popup 3";

(function() {
    let val = polyline;
    $('#popup_3').on('click', function(){
        alert(val);
    });
})()    

</script>
''')

@app.route('/good4')
def good4():
    return render_template_string('''
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>GOOD 4</h1>

<div id="popup_1">Click to show Popup 1</div></br>
<div id="popup_2">Click to show Popup 2</div></br>
<div id="popup_3">Click to show Popup 3</div></br>

<script language="javascript">

polyline = "Popup 1";

{
    let val = polyline;  // it has to use `let`, not `var`
    $('#popup_1').on('click', function(){
        alert(val);
    });
}

polyline = "Popup 2";

{
    let val = polyline;  // it has to use `let`, not `var`
    $('#popup_2').on('click', function(){
        alert(val);
    });
}

polyline = "Popup 3";

{
    let val = polyline;  // it has to use `let`, not `var`
    $('#popup_3').on('click', function(){
        alert(val);
    });
}

</script>
''')

@app.route('/good5')
def good5():
    return render_template_string('''
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>GOOD 5</h1>

<div id="popup_1">Click to show Popup 1</div></br>
<div id="popup_2">Click to show Popup 2</div></br>
<div id="popup_3">Click to show Popup 3</div></br>

<script language="javascript">

{
    let polyline = "Popup 1";  // it has to use `let`, not `var`
    $('#popup_1').on('click', function(){
        alert(polyline);
    });
}

{
    let polyline = "Popup 2";  // it has to use `let`, not `var`
    $('#popup_2').on('click', function(){
        alert(polyline);
    });
}



{
    let polyline = "Popup 3";  // it has to use `let`, not `var`
    $('#popup_3').on('click', function(){
        alert(polyline);
    });
}

</script>
''')


@app.route('/wrong')
def wrong():
    return render_template_string('''
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<h1>WRONG</h1>

<div id="popup_1">Click to show Popup 1</div></br>
<div id="popup_2">Click to show Popup 2</div></br>
<div id="popup_3">Click to show Popup 3</div></br>

<script language="javascript">

polyline = "Popup 1";

$('#popup_1').on('click', function(){
    alert(polyline);
});

polyline = "Popup 2";

$('#popup_2').on('click', function(){
    alert(polyline);
});

polyline = "Popup 3";

$('#popup_3').on('click', function(){
    alert(polyline);
});

</script>
''')

if __name__ == '__main__':
    #app.debug = True 
    app.run()

第二次单击时刷新数据 Ajax？

Refresh data on second click Ajax?

javascript

python

flask

leaflet