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

Question

我有一个 javascript 包含在我的一些页面上，它会在页面上列出的任何联系人上创建一个按钮。该按钮的目的是让用户可以轻松地向该联系人发送电子邮件，并且该电子邮件将包含诸如站点 URL.

之类的信息。

我使用以下 include

包含我的函数调用

<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

方案一：创建一个全局变量"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;
}

方案二：使用jQuery代码实现点击事件

$(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;
}

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

Need to pass a parameter on the onclick event of a button I add to my page using javascript

javascript

sharepoint-2013