在on()方法的函式代碼中使用關鍵字“this”參考ChildSelector

問題： 關鍵字 this 指的是附加 on() 方法的主選擇器，但我希望它指的是被點擊的選擇器。此外，單擊事件會在輸入欄位和按鈕上觸發，而不是僅在指定的選擇器.izbrisi（一個按鈕）上觸發。目標是在單擊具有類izbrisi的按鈕時洗掉具有類輸入組的div。

我正在我的一門課程中學習這個，我需要專門使用這種代碼變體，但我無法讓它作業。因此，請不要以完全不同的方式更改代碼。謝謝你。

$("#brojevi-polja").on("click", $(".izbrisi"), function() {
    $(this).closest(".input-group").remove();
});

<div id="brojevi-polja" class="col-4">
    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbri?i</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbri?i</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbri?i</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbri?i</button>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

有兩個不同的問題：

1. 你打錯電話了on。要進行事件委托，第二個引數應該是包含 CSS 選擇器的字串，而不是 jQuery 物件。所以改變

   $("#brojevi-polja").on("click", $(".izbrisi"), function()
   

   到

   $("#brojevi-polja").on("click", ".izbrisi", function()
   // ?????????????????????????????^^^^^^^^^^
   

2. 您在元素上有兩個class屬性izbrisi：

   <button class="btn btn-outline-secondary" type="button" class="izbrisi">Izbri?i</button>
   <!--    ^^^^^                                           ^^^^^                        -->
   

   你不能這樣做，它是無效的 HTML。只有第一個被使用，第二個被完全忽略。反而：

   <button class="btn btn-outline-secondary izbrisi" type="button">Izbri?i</button>
   <!--    ^^^^^                            ^^^^^^^                             -->
   

如果你修復這些，它會起作用：

顯示代碼片段

$("#brojevi-polja").on("click", ".izbrisi", function() {
    $(this).closest(".input-group").remove();
});

<div id="brojevi-polja" class="col-4">
    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary izbrisi" type="button">Izbri?i</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary izbrisi" type="button">Izbri?i</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary izbrisi" type="button">Izbri?i</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary izbrisi" type="button">Izbri?i</button>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

幾乎沒有什么問題

1 您的按鈕上有 2 個類屬性 2 您在單擊偵聽器中使用 jquery 選擇器

這行得通

$("#brojevi-polja").on("click", ".izbrisi", function(e) {
   e.preventDefault()
   
    $(this).closest(".input-group").remove();
});

<div id="brojevi-polja" class="col-4">
    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary izbrisi" type="button" >Izbri?i</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary izbrisi" type="button" >Izbri?i</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary izbrisi" type="button" >Izbri?i</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="number" class="form-control" name="broj" aria-label="Recipient's username"
            aria-describedby="basic-addon2">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary izbrisi" type="button" >Izbri?i</button>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

標籤：javascript jQuery

上一篇：打字稿中的抽象型別類/介面

下一篇：正則運算式將物件包含在陣列中