需要在我使用javascript添加到我的页面的按钮的onclick事件上传递参数

Question

我在某些页面中包含了一个javascript，它将在页面上列出的所有联系人上创建一个按钮。该按钮的作用是使用户可以通过电子邮件轻松地向该联系人发送电子邮件，并且该电子邮件将包含诸如网站URL之类的信息。

我使用以下包含项包括函数调用

<script type="text/javascript" data-Subject="Site" src="../SiteAssets/js-test/AddContactButtons.js"></script>

我的AddContactButtons.js具有以下来源：

$(document).ready(function() {  

    // Get the subject type
    var this_js_script = $('script[src*=AddContactButtons]');
    var subjectType = this_js_script.attr('data-Subject'); 
    if (typeof subjectType == 'undefined' || subjectType == null || subjectType == ''){
      subjectType = "Site";
    }
    //console.log('subjectType='+subjectType);
    addContactButtons(subjectType);
});
function addContactButtons(subjectType){
    var listTitle="Contacts";
    console.log('addcontactButtons:subjectType='+subjectType);
    $("table.ms-listviewtable[summary='"+listTitle+"']>tbody>tr").each(function(){
        $(this).append("<input type='button' value='Help' style='background-color:#0072C5; color:white' class='btnSub' onclick='javascript:openMail(this);'>");
    });
}
function openMail(btn){
    var emailString = "mailto:";
    var emailID = $(btn).prev("td").text()
    //console.log(emailID);
    console.log('openMail:subjectType='+subjectType);

    emailString += emailID ;
    emailString += "?Subject=SharePoint Site Support - Site=";
    emailString += _spPageContextInfo.webServerRelativeUrl;;
    //alert(emailString);
    location.href=emailString;
}

问题是我尝试了许多不同的变体，但似乎无法将变量subjectType传递给我的openMail函数。理想情况下，我想支持默认的网站支持主题，但是我需要一些选项来发送自定义主题，或者至少要有一些其他变体，以告知收到此电子邮件的人它支持自定义列表（应用） 。

任何想法都将不胜感激。谢谢

Answer 1

我建议向按钮添加click处理程序，而不要使用onclick属性，以便您可以显式传递所需的参数。

即：

const button = $("<input type='button' value='Help' style='background-color:#0072C5; color:white' class='btnSub'>");
button.click(() => openMail(button, subjectType));

$(document).ready(function() {  

    // Get the subject type
    var this_js_script = $('script[src*=AddContactButtons]');
    var subjectType = this_js_script.attr('data-Subject'); 
    if (typeof subjectType == 'undefined' || subjectType == null || subjectType == ''){
      subjectType = "Site";
    }
    //console.log('subjectType='+subjectType);
    addContactButtons(subjectType);
});
function addContactButtons(subjectType){
    var listTitle="Contacts";
    console.log('addcontactButtons:subjectType='+subjectType);
    $(".container").each(function(){
      const button = $("<input type='button' value='Help' style='background-color:#0072C5; color:white' class='btnSub'>");
      button.click(() => openMail(button, subjectType));
      $(this).append(button);
    });
}
function openMail(btn, subjectType){
  console.log('openMail:subjectType='+subjectType);
  /*
  var emailString = "mailto:";
  var emailID = $(btn).prev("td").text()
  //console.log(emailID);
  console.log('openMail:subjectType='+subjectType);

  emailString += emailID ;
  emailString += "?Subject=SharePoint Site Support - Site=";
  emailString += _spPageContextInfo.webServerRelativeUrl;;
  //alert(emailString);
  location.href=emailString;
  */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" data-Subject="Site" src="../SiteAssets/js-test/AddContactButtons.js"></script>

<div class="container"></div>
<div class="container"></div>

如@Bavo所说，您当前实现的范围和范围存在问题。

Answer 2

选项1：创建一个全局变量“ subjectType”以实现它。修改代码如下。

var subjectType="";
$(document).ready(function() {  

    // Get the subject type
    var this_js_script = $('script[src*=AddContactButtons]');
    subjectType = this_js_script.attr('data-Subject'); 
    if (typeof subjectType == 'undefined' || subjectType == null || subjectType == ''){
      subjectType = "Site";
    }
    //console.log('subjectType='+subjectType);
    addContactButtons(subjectType);
});
function addContactButtons(subjectType){
    var listTitle="Contacts";
    console.log('addcontactButtons:subjectType='+subjectType);
    $("table.ms-listviewtable[summary='"+listTitle+"']>tbody>tr").each(function(){
        $(this).append("<input type='button' value='Help' style='background-color:#0072C5; color:white' class='btnSub' onclick='javascript:openMail(this);'>");
    });
}
function openMail(btn){
    var emailString = "mailto:";
    var emailID = $(btn).prev("td").text()
    //console.log(emailID);
    console.log('openMail:subjectType='+subjectType);

    emailString += emailID ;
    emailString += "?Subject=SharePoint Site Support - Site=";
    emailString += _spPageContextInfo.webServerRelativeUrl;;
    //alert(emailString);
    location.href=emailString;
}

选项2：使用jQuery代码实现click事件。

$(document).ready(function() {  

    // Get the subject type
    var this_js_script = $('script[src*=AddContactButtons]');
    var subjectType = this_js_script.attr('data-Subject'); 
    if (typeof subjectType == 'undefined' || subjectType == null || subjectType == ''){
      subjectType = "Site";
    }
    //console.log('subjectType='+subjectType);
    addContactButtons(subjectType);
});
function addContactButtons(subjectType){
    var listTitle="Contacts";
    console.log('addcontactButtons:subjectType='+subjectType);
    $("table.ms-listviewtable[summary='"+listTitle+"']>tbody>tr").each(function(){       
        $(this).append("<input type='button' value='Help' style='background-color:#0072C5; color:white' class='btnSub'>");
    });
    $("table.ms-listviewtable[summary='"+listTitle+"']>tbody>tr input[value='Help']").click(function(){
        openMail($(this),subjectType);
    });
}
function openMail(btn,subjectType){
    var emailString = "mailto:";
    var emailID = $(btn).prev("td").text()
    //console.log(emailID);
    console.log('openMail:subjectType='+subjectType);

    emailString += emailID ;
    emailString += "?Subject=SharePoint Site Support - Site=";
    emailString += _spPageContextInfo.webServerRelativeUrl;;
    //alert(emailString);
    location.href=emailString;
}