使用回调函数而不是 onchange答案

【问题标题】：Using a callback function instead of onchange使用回调函数而不是 onchange
【发布时间】：2019-02-05 01:59:40
【问题描述】：

我有一个由 jQuery 进行了一些基本更改的表单，一切正常...目前，我必须使用 onchange="state()" 来调用脚本。

我对 Javascript 和 JQuery 真的很陌生，想知道这是否真的是最好的解决方案，我正在考虑使用回调函数，可能使用 on()，但似乎无法让它工作，这是最好的吗解决方案以及如何实现回调函数（即使它不是我感兴趣的最佳解决方案）

谢谢

let cWebsite = ["Communicate a message", "Build trust in our brand", "Sell our product", "Get our content online", "Realign our brand", "Engage a new audience"];
let iWebsite = ["make our site more discoverable", "increase engagement", "make it more user friendly", "improve accessiblity", "add more sections", "rebuild the whole thing!"];
let cSeo = ["build on my seo", "make my website faster", "make my website more usable"];
let iSeo = ["improve seo", "reporting my seo", "engage an audience", "All seo services", "compliment other touchpoints"];
let cGraphics = ["Create more graphics", "improve a specific section", "target a new audience", "make it more noticable", "make it stand out"];
let iGraphics = ["test a graphic", "solve a business problem", "track stuff!", "engage an audience", "promote our brand"];

let prices = {
    cWebsite: ["Please Select", "5k - 10k", "10k - 20k", "20k - 30k", "10k - 40k", "60k - 80k", "80k - 100k", "100K+"],
    iWebsite: ["Please Select", "5k - 10k", "10k - 20k", "20k - 30k", "10k - 40k", "60k - 80k", "80k - 100k", "100K+"],
    cSeo: ["Please Select", "£300/mo", "£550/mo", "£1100/mo"],
    iSeo: ["Please Select", "£300/mo", "£550/mo", "£1100/mo"],
    cGraphics: ["Please Select", "£100 - £300", "£300 - £600", "£900 - £1k", "1k - 5k", "5k - 15k", "15k+"],
    iGraphics: ["Please Select", "£100 - £300", "£300 - £600", "£900 - £1k", "1k - 5k", "5k - 15k", "15k+"]
    };

function state() {
    let sta = document.getElementById("state");
    let ser = document.getElementById("service");
    let site = document.getElementById("lives");
    let state = sta.options[sta.selectedIndex].value;
    let service = ser.options[ser.selectedIndex].value;

    if (state === "create") {
        if (service === "website") {
            doJoin(cWebsite);
            priceList(prices.cWebsite);
            site.style.display = "none";
        } else if (service === "seo") {
            doJoin(cSeo);
            priceList(prices.cSeo);
            site.style.display = "block";
        } else if (service === "graphics") {
            doJoin(cGraphics);
            priceList(prices.cGraphics);
            site.style.display = "none";
        }
    } else if (state === "improve") {
        if (service === "website") {
            doJoin(iWebsite);
            priceList(prices.iWebsite);
            site.style.display = "block";
        } else if (service === "seo") {
            doJoin(iSeo);
            priceList(prices.iSeo);
            site.style.display = "block";
        } else if (service === "graphics") {
            doJoin(iGraphics);
            priceList(prices.iGraphics);
            site.style.display = "none";
        }
    }
}



function doJoin(x) {
 $("#choices").empty();
    x.forEach(function (list) {
    let checkbox="<input type='checkbox'><label>"+list+"</label><br>"
    $("#choices").append($(checkbox));
    });
}


function priceList(x) {
 $("#pricelist").empty();
    x.forEach(function (list) {
    let option="<option>"+list+"</option>"
    $("#pricelist").append($(option));
    });
      }

【问题讨论】：

我不能高度推荐Elm 或React。花一天时间探索一种思考问题的新方法。最后，你可能不会为你的项目选择 Elm 或 React，但你总能从中学习和成长。
是在HTML还是.addEventListener()中使用全局事件处理器属性的问题？
真的....
@saltedm8 见When did using global event handler attributes within html become “considered bad practice”?。这取决于。问题的第二部分是什么？请注意，不必将 HTML 字符串包装到 jQuery() 调用 $("#choices").append($(checkbox)) 或 $("#pricelist").append($(option))
我看不到您在此代码中使用on 的位置。请在问题本身的minimal reproducible example 中包含所有相关代码。您可以使用Stack Snippets 这样做。

标签： javascript jquery callback onchange

【解决方案1】：

   $( "#foo" ).on( "click", function() {
  console.log( 22 );
});  
 <div id="foo">asas</div>

更多请参考：http://api.jquery.com/on/

【讨论】：

我知道它是如何使用的，它只是在应用于我的代码时似乎不起作用，这就是问题的目的，但感谢您的回复