目錄
回覆內容:
首頁 後端開發 php教程 javascript - 重複綁定事件的處理方式?

javascript - 重複綁定事件的處理方式?

Dec 01, 2016 am 12:25 AM
html javascript php

javascript - 重複綁定事件的處理方式?
解綁的彈窗是公共的。在點擊確認和取消的時候我怎麼知道是
javascript - 重複綁定事件的處理方式?
對應的銀行卡點擊的解綁(對應的銀行卡dom移除)操作

<code>&lt;!-- 银行卡列表 --&gt;
    &lt;div class="bankcard-block"&gt;
        &lt;div class="bankcard-item"&gt;
            &lt;img class="card-img" src="&lt;{$style}&gt;statics/images/yinlianzhifuicon.png"&gt;
            &lt;div class="card-info"&gt;
                &lt;p class="card-name"&gt;建设银行&lt;/p&gt;
                &lt;p class="card-type"&gt;储蓄卡&lt;/p&gt;
                &lt;p class="card-number"&gt;****  ****  **** &lt;label&gt;6535&lt;/label&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="ubind-card"&gt;解绑&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bankcard-block"&gt;
        &lt;div class="bankcard-item"&gt;
            &lt;img class="card-img" src="&lt;{$style}&gt;statics/images/yinlianzhifuicon.png"&gt;
            &lt;div class="card-info"&gt;
                &lt;p class="card-name"&gt;建设银行&lt;/p&gt;
                &lt;p class="card-type"&gt;储蓄卡&lt;/p&gt;
                &lt;p class="card-number"&gt;****  ****  **** &lt;label&gt;6535&lt;/label&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="ubind-card"&gt;解绑&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bankcard-block"&gt;
        &lt;div class="bankcard-item"&gt;
            &lt;img class="card-img" src="&lt;{$style}&gt;statics/images/yinlianzhifuicon.png"&gt;
            &lt;div class="card-info"&gt;
                &lt;p class="card-name"&gt;建设银行&lt;/p&gt;
                &lt;p class="card-type"&gt;储蓄卡&lt;/p&gt;
                &lt;p class="card-number"&gt;****  ****  **** &lt;label&gt;6535&lt;/label&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="ubind-card"&gt;解绑&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- 解绑成功 --&gt;
&lt;div class="unbind-confirm"&gt;
    &lt;p&gt;确定解绑该银行卡吗?&lt;/p&gt;
    &lt;hr&gt;
    &lt;div class="unbind-option clearfix"&gt;
        &lt;div class="unbind-cancel"&gt;取消&lt;/div&gt;
        &lt;div class="unbind-sure"&gt;确认&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>
登入後複製
登入後複製

回覆內容:

javascript - 重複綁定事件的處理方式?
解綁的彈窗是公共的。在點擊確認和取消的時候我怎麼知道是
javascript - 重複綁定事件的處理方式?
對應的銀行卡點擊的解綁(對應的銀行卡dom移除)操作

<code>&lt;!-- 银行卡列表 --&gt;
    &lt;div class="bankcard-block"&gt;
        &lt;div class="bankcard-item"&gt;
            &lt;img class="card-img" src="&lt;{$style}&gt;statics/images/yinlianzhifuicon.png"&gt;
            &lt;div class="card-info"&gt;
                &lt;p class="card-name"&gt;建设银行&lt;/p&gt;
                &lt;p class="card-type"&gt;储蓄卡&lt;/p&gt;
                &lt;p class="card-number"&gt;****  ****  **** &lt;label&gt;6535&lt;/label&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="ubind-card"&gt;解绑&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bankcard-block"&gt;
        &lt;div class="bankcard-item"&gt;
            &lt;img class="card-img" src="&lt;{$style}&gt;statics/images/yinlianzhifuicon.png"&gt;
            &lt;div class="card-info"&gt;
                &lt;p class="card-name"&gt;建设银行&lt;/p&gt;
                &lt;p class="card-type"&gt;储蓄卡&lt;/p&gt;
                &lt;p class="card-number"&gt;****  ****  **** &lt;label&gt;6535&lt;/label&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="ubind-card"&gt;解绑&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="bankcard-block"&gt;
        &lt;div class="bankcard-item"&gt;
            &lt;img class="card-img" src="&lt;{$style}&gt;statics/images/yinlianzhifuicon.png"&gt;
            &lt;div class="card-info"&gt;
                &lt;p class="card-name"&gt;建设银行&lt;/p&gt;
                &lt;p class="card-type"&gt;储蓄卡&lt;/p&gt;
                &lt;p class="card-number"&gt;****  ****  **** &lt;label&gt;6535&lt;/label&gt;&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="ubind-card"&gt;解绑&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- 解绑成功 --&gt;
&lt;div class="unbind-confirm"&gt;
    &lt;p&gt;确定解绑该银行卡吗?&lt;/p&gt;
    &lt;hr&gt;
    &lt;div class="unbind-option clearfix"&gt;
        &lt;div class="unbind-cancel"&gt;取消&lt;/div&gt;
        &lt;div class="unbind-sure"&gt;确认&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>
登入後複製
登入後複製

<code>用 jquery 的 方式
$('.ubind-card').click(function(){
    //的到当前银行卡列表的下标
    var ubindIndex = $(this).parents('.bankcard-block').index();
    //给确定按钮赋一个标识
    $('.unbind-sure').attr('val',ubindIndex ).show();
});
$('.unbind-sure').click(function(){
    var index = $(this).attr('val');
    $('.bankcard-block:eq('+index+')').remove();
});
</code>
登入後複製

如果可以的話望採納

很簡單呀,當用戶點擊解綁的時候,你可以把用戶點擊的是哪張銀行卡的資訊綁定在彈出框標籤的屬性上。例如你可以把銀行卡的序號綁定在上面,像這樣<div class="unbind-confirm" data-bankindex="1">。用戶點擊確認的時候你再到上面去取就好了。 <p class="answer fmt" data-id="1020000007619770"> </p> <p>透過<code>event.targetevent.currentTarget取得DOM
JavaScript事件物件

用一個變數來保存目前操作的卡片。

var currentCart = -1;//默认-1
$('#cards').on('click','.btnJieBang',function(){
currentCart=this.dataset.cartid;
});
//弹窗确定的事件里,去读取currentCart变量即可
登入後複製

點擊解綁的時候,你不就可以得到他的父元素了,然後透過相關操作刪除父元素,就能達到目的。

解綁上加個能區分開的data-id

綁定一個唯一標示

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 Dec 24, 2024 pm 04:42 PM

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南

CakePHP 日期和時間 CakePHP 日期和時間 Sep 10, 2024 pm 05:27 PM

CakePHP 日期和時間

CakePHP 檔案上傳 CakePHP 檔案上傳 Sep 10, 2024 pm 05:27 PM

CakePHP 檔案上傳

CakePHP 路由 CakePHP 路由 Sep 10, 2024 pm 05:25 PM

CakePHP 路由

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

CakePHP 專案配置 CakePHP 專案配置 Sep 10, 2024 pm 05:25 PM

CakePHP 專案配置

討論 CakePHP 討論 CakePHP Sep 10, 2024 pm 05:28 PM

討論 CakePHP

CakePHP 快速指南 CakePHP 快速指南 Sep 10, 2024 pm 05:27 PM

CakePHP 快速指南

See all articles