Bootstrap Modal with individual attributes

问题:

I would like to use one Bootstrap Modal for several functions, which should be loaded dynamically by clicking on a button / link (see example). For some reason the attributes (data-mTitle & data-mParams) will not load. With the standard attributes like href, id, class etc. it works flawlessly.

As I said, I would like to use only one Modal (HTML) and one JS function for all purposes (as an universal solution). Any idea what I am doing wrong?

$(document).ready(function(){
  
  $('#myModal').on('shown.bs.modal', function () {
    	  
        var $modal = $(this),
		modal_title = $(this).data('modal-title'),
		modal_params = $(this).data('modal-params');

        if(typeof modal_title !== typeof undefined && modal_title !== false) {
            title = modal_title;
        }
        else{
            title = 'My Title';
            }

        $.ajax({
            cache: false,
            type: 'POST',
            url: '/ajax.php',
            data: modal_params,
            success: function(data) {
                $modal.find('.modal-title').html(title);
                $modal.find('.modal-body').html(data);
            }
        });
    });
  
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a href="" data-toggle="modal" data-target="#myModal" data-modal-title="abcd Title" data-modal-params="a=b">Link 1</a>
<a href="" data-toggle="modal" data-target="#myModal" data-modal-title="efgh Title" data-modal-params="c=d">Link 2</a>

<div class="modal hide fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Loading title...</h4>
</div>
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

回答1:

You must use only lower-case letters in your attribute names.

You can find the reason in this answer.

Basically, when you write:

$(this).attr('data-mTitle')

jQuery is looking for this:

<a data-m-title="Title"></a>

By the way, even though there's nothing wrong with using .attr() here, instead you should use .data() that is specifically meant for working with data attributes.