最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】Bootstrap的js中如何在click事件中传递额外参数

参数 crifan 27浏览 0评论
折腾:
【未解决】iOS的Safari中html页面报错:SecurityError: The operation is insecure
期间,希望在已有代码:
js/main.js
$(document).on("click", ".single_storybook_item", redirectToDetailPage)
js/book_common.js
function redirectToDetailPage(event){
    console.log("redirectToDetailPage: event=%o", event)
    // window.location = $(this).data("href")
    var curElement = $(this)
    console.log("curElement=", curElement)
    var bookUrl = curElement.find("#book_url").text()
    console.log("bookUrl=", bookUrl)
    var bookId = curElement.find("#book_id").text()
    console.log("bookId=", bookId)
    // window.location = bookUrl
    var bookDetailUrl = "book_detail.html"
    console.log("bookDetailUrl=", bookDetailUrl)
    // localStorage.setItem("cur_book_id", bookId)
    // // for debug
    // var savedBookId = localStorage.getItem("cur_book_id")
    // console.log("savedBookId=", savedBookId)
    // window.location = bookDetailUrl
    var bookDetailUrlWithPara = bookDetailUrl + "?book_id=" + bookId
    console.log("bookDetailUrlWithPara=", bookDetailUrlWithPara)
    window.location = bookDetailUrlWithPara
}
中,click事件的处理函数redirectToDetailPage中,传递额外的参数,当前home页中搜索的内容
js click event extra para
jQuery’s .click – pass parameters to user function – Stack Overflow
去看看jquery的on的函数定义
How to pass event as argument to an inline event handler in JavaScript? – Stack Overflow
.click() | jQuery API Documentation
.on() | jQuery API Documentation
“.on( events [, selector ] [, data ], handler )
* data
Type: Anything
Data to be passed to the handler in event.data when an event is triggered.”
试了试:
$(document).on("click", ".single_storybook_item", {curInput: $("#inputQuery").val()}, redirectToDetailPage)
虽然可以传入参数了
但是:
$(“#inputQuery”).val()
在on的绑定的那一刻就计算值了
-》此处希望是被点击时,实时去拿到变量的值
然后再去包一层,手动得到当前输入的值,赋值给event的data:
    function saveInputAndRedirect(event){
        console.log("saveInputAndRedirect: event=%o", event)
        var curInput = $("#inputQuery").val()
        console.log("curInput=%s", curInput)
        event.data = {"lastInput": curInput}
        console.log("event.data=%o", event.data)
        redirectToDetailPage(event)
    }
    $(document).on("click", ".single_storybook_item", saveInputAndRedirect)

function redirectToDetailPage(event){
    console.log("redirectToDetailPage: event=%o", event)
    console.log("event.data=", event.data)
    var lastInput = event.data.lastInput
    console.log("lastInput=", lastInput)
}
是可以的:
但是突然发现:
导致了此处的被调用函数redirectToDetailPage中this不是之前被点击的元素,而是window了。。。
【总结】
最后用代码:
js/main.js
    // $(document).on("click", ".single_storybook_item", redirectToDetailPage)
    // $(document).on("click", ".single_storybook_item", {curInput: $("#inputQuery").val()}, redirectToDetailPage)
    function saveInputAndRedirect(event){
        console.log("saveInputAndRedirect: event=%o", event)
        console.log("this=%o", this)

        var curInput = $("#inputQuery").val()
        console.log("curInput=%s", curInput)
        event.data = {
            "curInput": curInput,
            "curElement": this,
        }
        console.log("event.data=%o", event.data)
        // redirectToDetailPage.bind(this)
        redirectToDetailPage(event)
    }
    $(document).on("click", ".single_storybook_item", saveInputAndRedirect)
js/book_detail.js
    function tryGetPassedInputAndRedirect(event){
        console.log("tryGetPassedInputAndRedirect: event=%o", event)
        console.log("this=%o", this)

        var curInput = restoreInput()
        console.log("curInput=%s", curInput)
        event.data = {
            "curInput": curInput,
            "curElement": this,
        }
        console.log("event.data=%o", event.data)
        redirectToDetailPage(event)
    }
    $(document).on("click", ".single_storybook_item", tryGetPassedInputAndRedirect)
然后:
js/book_common.js
const CurrentInputQsKey = "cur_input"


    console.log("redirectToDetailPage: event=%o", event)
    console.log("event.data=", event.data)

    // window.location = $(this).data("href")
    var curElement = $(this)
    var curInput = undefined

    if (event.data){
        curElement = $(event.data.curElement)

        curInput = event.data.curInput
    }
    console.log("curElement=", curElement)
    console.log("curInput=", curInput)

    var bookUrl = curElement.find("#book_url").text()
    console.log("bookUrl=", bookUrl)
    var bookId = curElement.find("#book_id").text()
    console.log("bookId=", bookId)
    // window.location = bookUrl
    var bookDetailUrl = "book_detail.html"
    console.log("bookDetailUrl=", bookDetailUrl)
    // localStorage.setItem("cur_book_id", bookId)
    // // for debug
    // var savedBookId = localStorage.getItem("cur_book_id")
    // console.log("savedBookId=", savedBookId)
    // window.location = bookDetailUrl
    var bookDetailUrlWithPara = bookDetailUrl + "?book_id=" + bookId
    if (curInput) {
        var encodedCurInput = encodeURIComponent(curInput)
        console.log("encodedCurInput=%s", encodedCurInput)
        bookDetailUrlWithPara += `&${CurrentInputQsKey}=${encodedCurInput}`
    }
    console.log("bookDetailUrlWithPara=", bookDetailUrlWithPara)
    window.location = bookDetailUrlWithPara
}
实现了,从detail页面传递额外参数curInput,以及当前被点击的html的元素:curElement给被调用的redirectToDetailPage,从而实现了:
main和detail两个页面都可以复用:redirectToDetailPage

转载请注明:在路上 » 【已解决】Bootstrap的js中如何在click事件中传递额外参数

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
18 queries in 0.087 seconds, using 9.35MB memory