Необходимо передать параметр в событие onclick кнопки, которую я добавляю на свою страницу, используя JavaScript

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

Опция 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 для достижения события щелчка.

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

Answer 2

Я бы предложил добавить обработчик 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, существует проблема с областями видимости и контекстом того, что вы в настоящее время реализовали.